Bootstrap-Plugin：標籤頁（Tab）插件

時間  2019-12-09
標籤 bootstrap plugin 標籤 tab 插件 欄目 Bootstarp 简体版
原文   原文鏈接
ylbtech-Bootstrap-Plugin：標籤頁（Tab）插件

 

1.返回頂部
一、

Bootstrap 標籤頁（Tab）插件

標籤頁（Tab）在 Bootstrap 導航元素 一章中介紹過。經過結合一些 data 屬性，您能夠輕鬆地建立一個標籤頁界面。經過這個插件您能夠把內容放置在標籤頁或者是膠囊式標籤頁甚至是下拉菜單標籤頁中。php

若是您想要單獨引用該插件的功能，那麼您須要引用  tab.js。或者，正如  Bootstrap 插件概覽 一章中所提到，您能夠引用  bootstrap.js 或壓縮版的  bootstrap.min.js。

用法

您能夠經過如下兩種方式啓用標籤頁：html

  • 經過 data 屬性：您須要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本連接中。

    添加 nav 和 nav-tabs 類到 ul 中，將會應用 Bootstrap 標籤樣式，添加 nav 和 nav-pills 類到 ul 中，將會應用 Bootstrap 膠囊式樣式。java

    <ul class="nav nav-tabs">
    <li><a href="#identifier" data-toggle="tab">Home</a></li>
    ...
</ul>
  • 經過 JavaScript：您可使用 Javscript 來啓用標籤頁，以下所示： 
    $('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

    下面的實例演示了以不一樣的方式來激活各個標籤頁：ios

    // 經過名稱選取標籤頁
$('#myTab a[href="#profile"]').tab('show')

// 選取第一個標籤頁
$('#myTab a:first').tab('show')

// 選取最後一個標籤頁
$('#myTab a:last').tab('show')

// 選取第三個標籤頁（從 0 開始索引）
$('#myTab li:eq(2) a').tab('show')

淡入淡出效果

若是須要爲標籤頁設置淡入淡出效果，請添加 .fade 到每一個 .tab-pane 後面。第一個標籤頁必須添加 .in 類，以便淡入顯示初始內容，以下面實例所示：web

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">...</div>
    <div class="tab-pane fade" id="svn">...</div>
    <div class="tab-pane fade" id="ios">...</div>
    <div class="tab-pane fade" id="java">...</div>
</div>

實例

下面的實例演示了使用 data 屬性的標籤頁（Tab）插件及其淡入淡出的效果：bootstrap

實例

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            菜鳥教程
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">Java
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門並創建本身的網站。菜鳥先飛早入行——學的不只是技術，更是夢想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一個由蘋果公司開發和發佈的手機操做系統。最初是於 2007 年首次發佈 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操做系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一個建立高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（好比 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>
嘗試一下 »

結果以下所示：服務器

標籤頁（Tab）插件

方法

.$().tab：該方法能夠激活標籤頁元素和內容容器。標籤頁須要用一個  data-target 或者一個指向 DOM 中容器節點的  href。 
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#identifier" data-toggle="tab">Home</a></li>
    .....
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    .....
</div>
<script>
    $(function () {
        $('#myTab a:last').tab('show')
    })
</script>

實例

下面的實例演示了標籤頁（Tab）插件方法 .tab 的用法。在本實例中，第二個標籤頁 iOS 是激活的：架構

實例

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">
            菜鳥教程</a>
    </li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">Java <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">
                    jmeter</a>
            </li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">
                    ejb</a>
            </li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門並創建本身的網站。菜鳥先飛早入行——學的不只是技術，更是夢想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一個由蘋果公司開發和發佈的手機操做系統。最初是於 2007 年首次發佈 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操做系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一個建立高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（好比 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>
<script>
    $(function () {
        $('#myTab li:eq(1) a').tab('show');
    });
</script>

 嘗試一下 »ide

結果以下所示：svn

標籤頁（Tab）插件方法

事件

下表列出了標籤頁（Tab）插件中要用到的事件。這些事件可在函數中當鉤子使用。

事件 描述 實例
show.bs.tab 該事件在標籤頁顯示時觸發，可是必須在新標籤頁被顯示以前。分別使用 event.target 和 event.relatedTarget 來定位到激活的標籤頁和前一個激活的標籤頁。 
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的標籤頁 e.relatedTarget // 前一個激活的標籤頁 })
shown.bs.tab 該事件在標籤頁顯示時觸發，可是必須在某個標籤頁已經顯示以後。分別使用 event.target 和 event.relatedTarget 來定位到激活的標籤頁和前一個激活的標籤頁。 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // 激活的標籤頁 e.relatedTarget // 前一個激活的標籤頁 })

實例

下面的實例演示了標籤頁（Tab）插件事件的用法。在本實例中，將顯示當前和前一個訪問過的標籤頁：

實例

<hr>
<p class="active-tab"><strong>激活的標籤頁</strong>：<span></span></p>
<p class="previous-tab"><strong>前一個激活的標籤頁</strong>：<span></span></p>
<hr>
<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">
            菜鳥教程</a></li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">
            Java <b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>菜鳥教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文檔，幫助廣大web技術愛好者快速入門並創建本身的網站。菜鳥先飛早入行——學的不只是技術，更是夢想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一個由蘋果公司開發和發佈的手機操做系統。最初是於 2007 年首次發佈 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 操做系統是用在蘋果電腦上，iOS 是蘋果的移動版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款開源的測試軟件。它是 100% 純 Java 應用程序，用於負載和性能測試。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一個建立高度可擴展性和強大企業級應用程序的開發架構，部署在兼容應用程序服務器（好比 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>
<script>
    $(function(){
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            // 獲取已激活的標籤頁的名稱
            var activeTab = $(e.target).text();
            // 獲取前一個激活的標籤頁的名稱
            var previousTab = $(e.relatedTarget).text();
            $(".active-tab span").html(activeTab);
            $(".previous-tab span").html(previousTab);
        });
    });
</script>

 嘗試一下 »

結果以下所示：

標籤頁（Tab）插件事件
二、
2.返回頂部
 
3.返回頂部
 
4.返回頂部
 
5.返回頂部
一、
二、
 
11.返回頂部
 
warn 做者：ylbtech
出處：http://ylbtech.cnblogs.com/
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程