Bootstrap 如何在页面中创建嵌套的引导导航选项卡组件

n8ghc7c1 于 8个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(89)

我在一个页面中嵌套了 Bootstrap 导航组件。发生的情况是，如果我点击工作正常的Nested Tab 2，然后点击Nested Tab 1，因为你可以看到Nested Tab 1的tab-content工作不正常。
我不确定我是否错过了其他东西，或者我需要一些JS事件，如shown.bs.tab。或者与slick carousel有冲突。
请参阅下面的code。

function navSlick() {
  const mySlider = $('.js-slider');
    mySlider.slick({
        infinite: true,
        focusOnSelect:true,
        slidesToShow: 2,
        slidesToScroll:1,
        arrows: false,
        dots: false,
    });
}
navSlick();

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

  <div class="container mt-4">

    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" data-toggle="tab" role="tab" href="#tab1">Tab 1</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" data-toggle="tab" role="tab" href="#tab2">Tab 2</a>
      </li>
    </ul>

    <div class="tab-content mt-2">
      <div class="tab-pane fade show active" role="tabpanel" id="tab1">
        <ul class="nav nav-tabs js-slider" role="tablist">
          <li class="nav-item" role="presentation">
            <a class="nav-link active" data-toggle="tab" role="tab" href="#nested-tab1">Nested Tab 1</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link" data-toggle="tab" role="tab" href="#nested-tab2">Nested Tab 2</a>
          </li>
        </ul>

        <div class="tab-content mt-2">
          <div class="tab-pane fade show active" role="tabpanel" id="nested-tab1">
            <h3>Nested Tab 1 Content</h3>
          </div>
          <div class="tab-pane fade" role="tabpanel" id="nested-tab2">
            <h3>Nested Tab 2 Content</h3>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" role="tabpanel"  id="tab2">
        <h3>Tab 2 Content</h3>
      </div>
    </div>

  </div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

twitter-bootstrap

来源：https://stackoverflow.com/questions/76850004/how-to-create-nested-bootstrap-nav-tabs-component-in-a-page

1条答案

按热度按时间

6mw9ycah1#

**更新：**现在可以工作了，我刚刚更新了js。下面是更新的代码。

然而，其他解决方案是受欢迎的。

function navSlick() {
    const mySlider = $('.js-sliders');
    const navLinkInner = $( ".nav-link--inner" );
    const navCustomTabs = $('.nav-custom--tabs a[data-toggle="tab"]');
    mySlider.slick({
      infinite: false,
      focusOnSelect:true,
      slidesToShow: 2,
      slidesToScroll:1,
      arrows: false,
      dots: false,
      initialSlide:0
    });
    /*fixes for my question below*/
    navLinkInner.on( "click", function() {
      navLinkInner.removeClass('active');
    });
    navCustomTabs.on('shown.bs.tab', function (e) {
      mySlider.slick('setPosition');
    })
}
navSlick();

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<div class="container mt-4">
    <ul class="nav nav-tabs nav-custom--tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" data-toggle="tab" role="tab" href="#tab1" aria-selected="true">Tab 1</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" data-toggle="tab" role="tab" href="#tab2" aria-selected="false">Tab 2</a>
      </li>
    </ul>

    <div class="tab-content mt-2">
      <div class="tab-pane fade show active" role="tabpanel" id="tab1">
        <ul class="nav nav-tabs js-sliders" role="tablist">
          <li class="nav-item" role="presentation">
            <a class="nav-link nav-link--inner active" data-toggle="tab" role="tab" href="#nested-tab1" aria-selected="true">Nested Tab 1</a>
          </li>
          <li class="nav-item" role="presentation">
            <a class="nav-link nav-link--inner" data-toggle="tab" role="tab" href="#nested-tab2" aria-selected="false">Nested Tab 2</a>
          </li>
        </ul>

        <div class="tab-content mt-2">
          <div class="tab-pane fade show active" role="tabpanel" id="nested-tab1">
            <h3>Nested Tab 1 Content</h3>
          </div>
          <div class="tab-pane fade" role="tabpanel" id="nested-tab2">
            <h3>Nested Tab 2 Content</h3>
          </div>
        </div>
      </div>
      <div class="tab-pane fade" role="tabpanel"  id="tab2">
        <h3>Tab 2 Content</h3>
      </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

赞(0）回复(0）举报 8个月前

我来回答

Bootstrap 如何在页面中创建嵌套的引导导航选项卡组件

1条答案

相关问题

热门标签

最新问答