Question

我正在使用CSS Slider，每个幻灯片中都有两个子标签。

滑块的子选项卡在li上使用Bootstrap的“活动”类，然后在单击非活动选项卡的导航箭头（＆lt; or＆gt;）时将非活动的li类更改为活动状态。

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

我的JS小提琴

有问题的代码

                    <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-->

请参阅以下链接（MEET THE TEAM部分）以获得更准确的想法，因为粘贴的代码似乎不起作用。

我的网站链接

TST Website

Answer 1

您标签的位置必须是唯一的。现在你重复相同的href =＆＃34; tab1＆＃34;，href =＆＃34; tab2＆＃34;对于每个滑块。您可以将其更改为：

href =＆＃34; tab1-a＆＃34;，href =＆＃34; tab2-a＆＃34;对于画廊1。

href =＆＃34; tab1-b＆＃34;，href =＆＃34; tab2-b＆＃34;对于画廊2。

另外，请确保对ID进行相同的处理。由于字符限制，我无法在此处粘贴完整代码。

请参阅JsFiddle

＆＃13;

<!------------ 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>

＆＃13;

CSS Slider的Tab的活动类（Bootstrap）在第二张幻灯片上不起作用

1 个答案: