代码之家  ›  专栏  ›  技术社区  ›  vedankita kumbhar

带引导标签的猫头鹰旋转木马

  •  0
  • vedankita kumbhar  · 技术社区  · 6 年前

    我正在使用带引导标签的猫头鹰旋转木马。因为我写了以下代码 My Code

    <ul class="nav nav-tabs mytabs owl-carousel owl-theme">
                                            <li class="nav-item">
                                                <a class="nav-link active" data-toggle="tab" data-target="#dec1">
    Tab1
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" data-target="#dec2">
                                                    Tab2
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" data-target="#dec3">
                                                   Tab3
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" data-target="#dec4">
                                                   Tab 4
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" data-target="#dec5">
                                                    Tab 5
                                                </a>
                                            </li>
                                        </ul>
    
                                        <div class="tab-content">
                            <div class="tab-pane active" id="dec1">
                                Tab cntent 1
                            </div>
                            <div class="tab-pane  fade" id="dec2">
                                Tab cntent 2
                            </div>
    
                            <div class="tab-pane fade" id="dec3">
                                Tab cntent 3
                            </div>
    
                            <div class="tab-pane fade" id="dec4">
                                Tab cntent 4
                            </div>
    
    
    
                        </div>
    

    我的问题是我使用owlcarousel来处理可滚动的标签页,但是我在使用active类时遇到了问题。可能是owl carousel类和tab active类有冲突。活动类未正确应用于当前活动选项卡。请看我的运行示例。请帮忙。

    1 回复  |  直到 6 年前
        1
  •  0
  •   KokHanz    6 年前
    <div class="nav-wrapper">
      <ul class="nav nav-tabs">
        <li class="active">
          <a class="active" data-toggle="tab" data-target="#dec1">
          Tab1
          </a>
        </li>
        <li class="">
          <a class="" data-toggle="tab" data-target="#dec2">
             Tab2
          </a>
        </li>
      </ul>
      <div class="tab-content">........</div>
    </div>
    

    我删除了一些类&它可以工作。可能与owl carousel类和使用的类冲突。检查此代码。

    https://codepen.io/jeroenreijs/pen/pwpvrZ