Bootstrap之javascript插件---Togglable tabs（标签页）

简介：

　　标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间。

代码示例：

  <div>
<!-- 标签 -->
    <!-- Nav tabs 标签导航-->
    <ul class="nav nav-tabs" role="tablist">
<!-- 标签对应着内容 #home，#profile，#messages -->
      <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">
<!-- 此处的id对应标签中的a的href链接 -->
      <div role="tabpanel" class="tab-pane active" id="home">...</div>
      <div role="tabpanel" class="tab-pane" id="profile">...</div>
      <div role="tabpanel" class="tab-pane" id="messages">...</div>
      <div role="tabpanel" class="tab-pane" id="settings">...</div>
    </div>

  </div>

　　无需写任何javascript代码，只需简单的为页面元素指定 data-toggle="tab"

　　为ul添加 nav 和 nav-tabs class

用法：　　

通过 JavaScript 启用 tabbable 选项卡（每个选项卡需要单独激活）：

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

可以通过多种方式激活单个选项卡：

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

 

 

 

详细js底层实现请参照官方文档。---END

 

转载于:https://www.cnblogs.com/ilaozhao/p/8058514.html