javascript - 为选项卡内容 Bootstrap 多个导航选项卡

Question

我正在尝试为 bootstrap 选项卡创建一种分页，我认为一种简单的方法是使用 html 创建两个导航选项卡，然后尝试将第二个导航设置为看起来像轮播分页。但是我目前在尝试实现它以便两个导航选项卡一起工作时遇到问题。由于我无法获取它，因此如果我单击一个选项卡，另一个选项卡将显示为事件状态。

Here is my Fiddle 但是我无法让它正常工作。

<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 实现吗？

Answer 1

单击选项卡时，记录 href 值。然后选择所有具有匹配 href 的导航选项卡并将它们设置为事件状态。这将使顶部和底部导航保持同步，无论您单击哪个导航。最后将匹配的选项卡设置为事件。

Updated JSFIDDLE

$('.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');
})