CSS Slider's Tab的Active Class(Bootstrap)在第二张幻灯片上不起作用

乐声

我正在使用CSS滑块,该滑块在每个幻灯片中利用两个子选项卡。

滑块的子选项卡在li上使用Bootstrap的“活动”类,然后在单击非活动选项卡的导航箭头(<或>)时将非活动li的类更改为活动。

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

我的JS小提琴

JS小提琴

有问题的代码

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

请参阅下面的链接(“见团队”部分)以获取更准确的想法,因为粘贴的代码似乎也无法正常工作。

艾米

选项卡的href的位置必须唯一。现在,您要为每个滑块重复相同的href =“ tab1”,href =“ tab2”。您可以将其更改为:

画廊1的href =“ tab1-a”,href =“ tab2-a”。

画廊2的href =“ tab1-b”,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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

通过powerpoint进度,宏在第二张幻灯片上不起作用

来自分类Dev

通过powerpoint进度,宏在第二张幻灯片上不起作用

来自分类Dev

幻灯片:CSS3过渡不起作用

来自分类Dev

CSS幻灯片。仅第二张幻灯片闪烁。而且仅在Chrome / Safari中

来自分类Dev

CSS3 Slider在我的网站上不起作用

来自分类Dev

Pure Css Slider无法向每张幻灯片添加文本

来自分类Dev

Slider Revolution幻灯片周围有边框半径,但是我找不到CSS

来自分类Dev

创建一个JavaScript滑块;滑动动作在第一张幻灯片上不起作用,但是滑动动作在第二张幻灯片后起作用吗?

来自分类Dev

Jssor Slider计算幻灯片/图像

来自分类Dev

Slider Pro 幻灯片计数

来自分类Dev

CSS a:active伪类不起作用

来自分类Dev

CSS3 Slider包含超过6张图片

来自分类Dev

Pure CSS Slider在移动浏览器中不起作用

来自分类Dev

ios Slider默认为最后一张幻灯片

来自分类Dev

在Easy Slider中更改第一张幻灯片的暂停时间

来自分类Dev

JS Slider不起作用

来自分类Dev

纯CSS3幻灯片会重复最后4张幻灯片吗?

来自分类Dev

使用CSS-HTML的幻灯片仅显示四张幻灯片

来自分类Dev

CSS Image Slider中的计时

来自分类Dev

Slick Slider导航的CSS问题

来自分类Dev

CSS / JS Slider问题与循环

来自分类Dev

在Slick Slider中更换幻灯片之前检查条件

来自分类Dev

jQuery Slider-将最近的幻灯片移到边缘

来自分类Dev

为Slick Slider克隆额外的幻灯片

来自分类Dev

更改Jssor Slider中的幻灯片集

来自分类Dev

仅设置最后显示的Slick Slider幻灯片的样式?

来自分类Dev

CSS Active菜单项不起作用?

来自分类Dev

我的 CSS Hover 和 Active 样式不起作用

来自分类Dev

CSS幻灯片过渡

Related 相关文章

热门标签

归档