Bootstrap 导航元素（ tab导航）标签页

1、基本的导航元素：标签导航。基于ul、li而来，给ul添加 class="nav nav-tabs" 即可。选中的li添加 class="active"即可。

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

2、用 class .nav-pills 代替 .nav-tabs 即可应用胶囊样式

3、给li添加 class="disabled" 即可禁用链接。　　

4、使用标签切换内容。

　　1）每一个li需要添加 <a data-toggle="tab" href="#menu1">，其中href为内容div id

　　2）添加内容div

　　　　其中根div必须为 class="tab-content"，内容项必须为 class="tab-pane".

<div class="container">
  <h2>动态标签</h2>
  <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
    <li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
    <li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
    <li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>首页</h3>
      <p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>菜单 1</h3>
      <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>菜单 2</h3>
      <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>菜单 3</h3>
      <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
    </div>
  </div>
</div>

5、通过.tab('show')也能进行切换。

参考：

1、Bootstrap 导航元素 | 菜鸟教程

2、Bootstrap 标签页（Tab）插件 | 菜鸟教程

Bootstrap 导航元素（ tab导航）标签页

猜你喜欢