我正在尝试为Bootstrap选项卡创建一种分页,我认为一种简单的方法是使用html创建两个导航标签,然后尝试设置第二个导航的样式,使其看起来像轮播分页。但是我目前在尝试实现它方面遇到问题,以便两个导航选项卡一起工作。由于无法管理,因此如果单击一个选项卡,则另一个选项卡将显示为活动状态。
这是我的小提琴,但是我无法使其正常工作。
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">1</div>
<div role="tabpanel" class="tab-pane" id="profile">2</div>
<div role="tabpanel" class="tab-pane" id="messages">3</div>
<div role="tabpanel" class="tab-pane" id="settings">4</div>
</div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
</div>
我本质上想要实现的是,选项卡系统的顶部导航和底部导航将根据所选内容自动更新(活动类)。可以通过javascript实现吗?
单击选项卡时,记录href值。然后选择所有具有匹配href的导航标签并将其设置为活动。无论您单击哪一个,顶部和底部的导航都将保持同步。最后,将匹配选项卡设置为活动。
$('.nav-tabs li a').click(function (e) {
//get selected href
var href = $(this).attr('href');
//set all nav tabs to inactive
$('.nav-tabs li').removeClass('active');
//get all nav tabs matching the href and set to active
$('.nav-tabs li a[href="'+href+'"]').closest('li').addClass('active');
//active tab
$('.tab-pane').removeClass('active');
$('.tab-pane'+href).addClass('active');
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句