2

我正在使用这个带有 twitter 引导程序的选项卡式菜单。

<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>

我可以通过单击转到下一个选项卡，我想知道是否可以添加链接/按钮并从上一个选项卡访问下一个选项卡。

4

3 回答 3

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

于 2014-08-13T09:37:36.333 回答
0

根据Bootstrap Tabs 文档，您可以使用 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，则创建一个事件处理程序来捕获链接上的“点击”。如果您需要有关它的更多信息，请查看此答案。

于 2013-09-20T09:31:41.210 回答
-1

看到这个DEMO

演示

js

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

$('#myTab a:last').tab('show');
于 2013-08-08T12:50:36.953 回答