CSS 滑块的活动选项卡 Class (Bootstrap) 在第二张幻灯片上不起作用

Question

我正在使用 CSS 滑块，它在每张幻灯片中使用两个子选项卡。

滑块的子选项卡在 li 上使用 Bootstrap 的 'Active' Class，然后在非活动选项卡的导航箭头 ( < 或 >) 被点击。

子选项卡在第一张幻灯片上正常工作，但在第二张幻灯片或之后的任何幻灯片上不起作用。

我的JSFiddle

有问题的代码

            <div class="profile-thumbnail"> 
                            
                    <div class="profile-image"> 
                    
                    <div class="overlay-profile"></div>
                    
                    </div>
                    
                    <!-- Sub Tabs -->
                    <ul class="nav nav-tabs" id="myTab">
                        <li class="active"><a class="hvr-border-fade" href="#tab1" data-toggle="tab">&lt;</a></li>
                        <li><a class="hvr-border-fade" href="#tab2" data-toggle="tab">&gt;</a></li>
                    </ul>
                                    
                </div>
                <!-- END Player Profile Thumbnail-->

请参阅下面的 link（与团队会面部分）以获得更准确的想法，因为粘贴的代码似乎也不起作用。

Answer 1

您标签页的 href 位置必须是唯一的。现在，您正在为每个滑块重复相同的 href="tab1"、href="tab2"。您可以将其更改为：

href="tab1-a"，画廊 1 的 href="tab2-a"。

href="tab1-b"，画廊 2 的 href="tab2-b"。

此外，请确保您对 ID 遵循相同的流程。由于字符限制，我无法在此处粘贴完整代码。

见JsFiddle

<!------------ Sean Peens ------------>
<article>
  <!-- Player Profile Thumbnail-->
  <div class="profile-thumbnail">
    <div class="profile-image">
      <div class="overlay-profile"></div>
    </div>
    <!-- Sub Tabs -->
    <ul class="nav nav-tabs" id="myTab">
      <li class="active">
        <a class="hvr-border-fade" href="#tab1-a" data-toggle="tab">&lt;</a>
      </li>
      <li><a class="hvr-border-fade" href="#tab2-a" data-toggle="tab">&gt;</a>
      </li>
    </ul>
  </div>
  <!-- END Player Profile Thumbnail-->
  <!-- Start Player's Profile -->
  <div class="player-profile">
    <!-- First Tab -->
    <div class="tab-pane fade in active" id="tab1-a">
      <div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
        Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
      </div>
    </div>
    <!-- Second Tab -->
    <div class="tab-pane fade in" id="tab2-a">
      <div class="gun-profile">
        <img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
      </div>
      <div class="gun-profile-text"><span class="gun-title">KWA SR5</span>

        <br>NC STAR Red Dot
        <br>Underslung Grenade Launcher
        <br>Extended Barrel
        <br>Mock Suppressor
      </div>
    </div>
  </div>
  <!-- END Start Player's Profile -->
  <!-- Start Player's Title -->
  <div class="player-details">
    <h3>Sean Peens</h3>

    <ul>
      <li><span class="aka">AKA 'SNOWMAN'</span>

        <br>Team Captain
      </li>
    </ul>
  </div>
  <!-- END Start Player's Title -->
</article>
<!------------ END Sean Peens ------------>
<!------------ Richard Bradley ------------>
<article>
  <!-- Player Profile Thumbnail-->
  <div class="profile-thumbnail">
    <div class="profile-image">
      <div class="overlay-profile"></div>
      <!-- Thumb Image -->
      <img src="http://roxyprinsloo.co.za/tst/_include/img/work/thumbs/image-01.jpg">
    </div>
    <!-- Sub Tabs -->
    <ul class="nav nav-tabs" id="myTab">
      <li class="active">
        <a class="hvr-border-fade" href="#tab1-b" data-toggle="tab">&lt;</a>
      </li>
      <li><a class="hvr-border-fade" href="#tab2-b" data-toggle="tab">&gt;</a>
      </li>
    </ul>
  </div>
  <!-- END Player Profile Thumbnail-->
  <!-- Start Player's Profile -->
  <div class="player-profile">
    <!-- First Tab -->
    <div class="tab-pane fade in active" id="tab1-b">
      <div class="player-profile-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque.
        Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.
      </div>
    </div>
    <!-- Second Tab -->
    <div class="tab-pane fade in" id="tab2-b">
      <div class="gun-profile">
        <img src="http://roxyprinsloo.co.za/tst/_include/img/profile-guns/richard-gun.png">
      </div>
      <div class="gun-profile-text"><span class="gun-title">KWA SR10</span>

        <br>NC STAR Red Dot
        <br>PEQ Box
        <br>Magpul Furniture
        <br>Noveske KX3 Flash Enhancer
      </div>
    </div>
  </div>
  <!-- END Start Player's Profile -->
  <!-- Start Player's Title -->
  <div class="player-details">
    <h3>Richard Bradley</h3>

    <ul>
      <li><span class="aka">AKA 'DEADLEE'</span>

        <br>Team Co-Captain
      </li>
    </ul>
  </div>
  <!-- END Start Player's Title -->
</article>

CSS 滑块的活动选项卡 Class (Bootstrap) 在第二张幻灯片上不起作用

CSS Slider's Tab's Active Class (Bootstrap) doesn't work on second slide

css

tabs

slider

twitter-bootstrap