时间戳

首页 > 解决方案 > dynamic tab bootstrap creation doesn't work well

php - dynamic tab bootstrap creation doesn't work well

问题描述

I created a dynamic bootstrap tab with a specific tab to insert in the administration inside description field. The problem when I want to display the information inside the catalog, it display in the first tab all the text If I click on the tab I have no problem, the information is correct after

<tabCatalog> and </tabCatalog> are the element allow to create the dynamic tab on the catalog include include inside the text.

$desc = $this->getProductsDescription();

 $product_tab_title = '<div id="categoriesTabs" style="overflow: auto;">';
 $product_tab_title .='<ul class="nav nav-tabs flex-column flex-sm-row" role="tablist"  id="myTab">';

  if (strpos($desc, '<tabCatalog>') !== FALSE) {
    $cut = explode('<tabCatalog>', trim($desc));
    $c = 0;

    foreach ($cut as $k => $part) {
      if (trim($part) != '') {
        if (strpos($part, '</tabCatalog>') !== FALSE) {
          $t = substr($part, 0, strpos($part, '</tabCatalog>'));
          if ($k = 0) {
            $class = 'nav-link active';
          } else {
            $class = 'nav-link';
          }

          $product_tab_title .= '<li class="nav-item"><a href="#tab' . $c . '"role="tab" data-toggle="tab" class="' . $class . '">' . $t . '</a></li>';
        }
      }

      $c++;
    }
  }

  $product_tab_title .= '</ul>';
  $product_tab_title .= '</div>';

  $product_tab_description = '<div>';
  $product_tab_description .= '<div class="tab-content">';

  if (strpos($desc, '<tabCatalog>') !== FALSE) {
    $cut = explode('<tabCatalog>', trim($desc));

    $n = 0;

    foreach ($cut as $n => $part) {
      if (trim($part) != '') {
        if (strpos($part, '</tabCatalog>') !== FALSE) {
          $r = substr($part, strpos($part, '</tabCatalog>') + 13);
          $product_tab_description .= '<div class="tab-pane active" id="tab' . $n . '">' . $r . '</div>';
        }
      }

      $n++;
    }
  }

// content tab
  $products_description_content = '<!-- Start products_description_tab -->' . "\n";
  $products_description_content .= '<div class="col-md-' . $content_width .'">';
  $products_description_content .= '<div class="separator"></div>';
  $products_description_content .= '<div class="contentText">';
  $products_description_content .= $product_tab_title;
  $products_description_content .= $product_tab_description;
  $products_description_content .= '<div>';
  $products_description_content .= '<div>';
  $products_description_content .= '<div>';
  $products_description_content .= '<div>';
  $products_description_content .= '<!-- end products_description_tab -->' . "\n";

  echo  $products_description_content

标签： phpjquerytwitter-bootstrap

解决方案

Both tabs have the active class... 

foreach ($cut as $n => $part) {
  if (trim($part) != '') {
    if (strpos($part, '</tabCatalog>') !== FALSE) {
      $r = substr($part, strpos($part, '</tabCatalog>') + 13);
      $product_tab_description .= '<div class="tab-pane active" id="tab' . $n . '">' . $r . '</div>';
    }
  }

  $n++;
}

I suggest you to remove active from the class list in that loop and add that tiny jQuery script on document ready:

$(document).ready(function(){
  $(".tab-pane").first().addClass("active");
});

Or .eq(1) (zero-based) instead of .first() if you prefer having the second tab active on page load.

推荐阅读