html - Bootstrap 标签式导航

标签 html css twitter-bootstrap tabs

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

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

最佳答案

查看我的 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

关于html - Bootstrap 标签式导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18126339/

相关文章:

javascript - 首次调用返回类型函数时未调用两个 javascript 函数

java - 在 Java 中呈现 HTML

html - Dhtml 菜单导航问题

html - 漂亮的 CSS3 内嵌边框

jQuery slider 不适用于网站

android - css 居中在 Phonegap 中不起作用

html - 如何将div放置在另一个之上

css - .table-responsive 和 scroll 始终可见

使用固定宽度的容器时,HTML/CSS(Twitter Bootstrap)页脚无法正确显示?

html - Bootstrap 3 列问题