Question

我正在使用带有twitter bootstrap的标签菜单。

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

我可以点击它进入下一个标签，我想知道是否可以添加链接/按钮并访问上一个标签中的下一个标签。

Answer 1

查看我的jsfiddle：http://jsfiddle.net/L6bf7nvc/

请务必在bootstrap.js

之前检查是否包含了jquery.js

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

版本：jquery 2.1.0和bootstrap 3.2.0

Answer 2

根据Bootstrap Tabs documentation，您可以使用Javascript：

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>

<script>
$(function () {
$('#myTab a:last').tab('show');
})
</script>

您只需创建指向该功能的链接，或者如果使用不引人注目的JavaScript，则创建一个捕获链接上的“点击”的事件处理程序。如果您需要更多相关信息，请查看此answer。

Answer 3

查看此DEMO

<强> DEMO

<强> JS

$('#myTab a').click(function(e) {
    e.preventDefault();
    $(this).tab('show');
})

$('#myTab a:last').tab('show');

Bootstrap选项卡式导航

3 个答案: