首页 文章

用于标签内容的bootstrap mulitple nav标签

提问于
浏览 次
1

我试图为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实现吗？

javascript jquery html css twitter-bootstrap

2 回答

  • 3

    单击选项卡时，记录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');
})
    回复于
  • 1

    我发现当使用淡入淡出效果（即 class="fade" ）时，@ Brino的答案不会应用淡入淡出过渡 . 阅读完引导代码和文档后，我发现我可以在锚标记上调用 $().tab('show) ，所有选项卡都会相应更新 . 请参阅以下代码段 .

    $('.nav-tabs li a').click(function (e) {     
    //get selected href
    var href = $(this).attr('href');
    
    // show tab for all tabs that match href
    $('.nav-tabs li a[href="' + href + '"]').tab('show');
})

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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 fade in active" id="home">1</div>
        <div role="tabpanel" class="tab-pane fade" id="profile">2</div>
        <div role="tabpanel" class="tab-pane fade" id="messages">3</div>
        <div role="tabpanel" class="tab-pane fade" 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>
    回复于

相关问题