动态选项卡引导程序创建效果不佳答案

【问题标题】：dynamic tab bootstrap creation doesn't work well动态选项卡引导程序创建效果不佳
【发布时间】：2018-11-05 22:14:04
【问题描述】：

我创建了一个动态引导选项卡，其中包含一个要插入到管理内部描述字段中的特定选项卡。当我想显示目录内的信息时的问题，它在第一个选项卡中显示所有文本如果我点击标签我没有问题，之后信息是正确的

<tabCatalog> 和 </tabCatalog> 是允许在目录上创建动态选项卡的元素，包括包含在文本中。

$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

【问题讨论】：

我们可以看截图或提供一些示例输入数据，以便我们更好地理解/查看问题吗？
@mickmackusa 你可以看到那里：jsfiddle.net/oitsuki/2stwx04u。第一次运行显示第一个选项卡内的所有信息，单击另一个选项卡并重新单击第一个选项卡，这是正确的。

标签： php jquery twitter-bootstrap

【解决方案1】：

两个标签都有active 类...

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++;
}

我建议您从该循环中的类列表中删除active，并在准备好的文档中添加那个微小的 jQuery 脚本：

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

如果您希望第二个选项卡在页面加载时处于活动状态，请使用 .eq(1)（从零开始）而不是 .first()。

【讨论】：