我正在使用CSS滑块,该滑块在每个幻灯片中利用两个子选项卡。
滑块的子选项卡在li上使用Bootstrap的“活动”类,然后在单击非活动选项卡的导航箭头(<或>)时将非活动li的类更改为活动。
子选项卡在第一张幻灯片上正常工作,但在第二张幻灯片上或之后的任何幻灯片上不起作用。
我的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"><</a></li>
<li><a class="hvr-border-fade" href="#tab2" data-toggle="tab">></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遵循相同的过程。由于字符限制,我无法在此处粘贴完整的代码。
<!------------ 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"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-a" data-toggle="tab">></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"><</a>
</li>
<li><a class="hvr-border-fade" href="#tab2-b" data-toggle="tab">></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] 删除。
我来说两句