bootstrap選項(xiàng)卡使用方法解析
選項(xiàng)卡Tabs是Web中一種非常常用的功能。用戶點(diǎn)擊或懸浮對應(yīng)的菜單項(xiàng),能切換出對應(yīng)的內(nèi)容
Bootstrap框架中的選項(xiàng)卡主要有兩部分內(nèi)容組成:
選項(xiàng)卡組件(也就是菜單組件),對應(yīng)的是 Bootstrap的 nav-tabs)
底部可以切換的選項(xiàng)卡面板,在 Bootstrap 中通常 tab-pane 來表示.
<!-- 選項(xiàng)卡組件(菜單項(xiàng)nav-tabs)--> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">規(guī)則</a></li> <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li> <li><a href="#security" role="tab" data-toggle="tab">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li> </ul> <!-- 選項(xiàng)卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane" id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane" id="forum">論壇內(nèi)容面板</div> <div class="tab-pane" id="security">安全內(nèi)容面板</div> <div class="tab-pane" id="welfare">公益內(nèi)容面板</div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
選項(xiàng)卡–選項(xiàng)卡的結(jié)構(gòu)
一個(gè)選項(xiàng)卡主要包括兩個(gè)部分,其一是菜單項(xiàng),其二是內(nèi)容面板。
關(guān)鍵一點(diǎn),選項(xiàng)卡中鏈接的錨點(diǎn)要與對應(yīng)的面板內(nèi)容容器的ID相匹配。
對于面板內(nèi)容tab-pane都是隱藏的,只有當(dāng)前面板內(nèi)容才是顯示的:
css源碼:
.tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; }
選項(xiàng)卡–觸發(fā)切換效果
選項(xiàng)卡也定義data屬性來觸發(fā)切換效果。當(dāng)然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發(fā)選項(xiàng)卡需要滿足以下幾點(diǎn)要求:
1、選項(xiàng)卡導(dǎo)航鏈接中要設(shè)置 data-toggle=”tab”
2、并且設(shè)置 data-target=”對應(yīng)內(nèi)容面板的選擇符(一般是ID)”;
如果是鏈接的話,還可以通過 href=”對應(yīng)內(nèi)容面板的選擇符(一般是ID)”
主要起的作用是用戶點(diǎn)擊的時(shí)候能找到該選擇符所對應(yīng)的面板內(nèi)容 tab-pane。
3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中,而且每個(gè)內(nèi)容面板 tab-pane 都需要設(shè)置一個(gè)獨(dú)立的選擇符(最好是ID)與選項(xiàng)卡中的 data-target 或 href 的值匹配。
選項(xiàng)卡–為選擇卡添加fade樣式
為了讓面板的隱藏與顯示在切換的過程效果更流暢,可以在面板中添加類名 fade,讓其產(chǎn)生漸入的效果。
在添加 fade 樣式時(shí),最初的默認(rèn)顯示的內(nèi)容面板一定要記得加上 in 類名,不然其內(nèi)容用戶無法看到
<!-- 選項(xiàng)卡組件(菜單項(xiàng)nav-tabs)--> <ul id="myTab" class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li> <li><a href="#rule" role="tab" data-toggle="tab">規(guī)則</a></li> <li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li> <li><a href="#security" role="tab" data-toggle="tab">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li> </ul> <!-- 選項(xiàng)卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div> <div class="tab-pane fade" id="security">安全內(nèi)容面板</div> <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
選項(xiàng)卡–膠囊式選項(xiàng)卡(nav-pills)
在Bootstrap除了可以讓 nav-tabs 具有選項(xiàng)卡的切換功能之外,還可以對膠囊式 nav-pills 導(dǎo)航也具有選項(xiàng)卡的功能。我們只需要將 nav-tabs 換成 nav-pills,另外關(guān)鍵一點(diǎn)是將 data-toggle=”tab”換成data-toggle=”pill”。
<!-- 選項(xiàng)卡組件(菜單項(xiàng)nav-pills)--> <ul id="myTab" class="nav nav-pills" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li> <li><a href="#rule" role="tab" data-toggle="pill">規(guī)則</a></li> <li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li> <li><a href="#security" role="tab" data-toggle="pill">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="pill">公益</a></li> </ul> <!-- 選項(xiàng)卡面板 --> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div> <div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div> <div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div> <div class="tab-pane fade" id="security">安全內(nèi)容面板</div> <div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div> </div>
選項(xiàng)卡–JavaScript觸發(fā)方法
在每個(gè)鏈接的單擊事件中調(diào)用tab(“show”)方法,顯示對應(yīng)的標(biāo)簽面板內(nèi)容。針對上面的示例,刪除HTML中自定義的 data-toggle=”tab” 或 data-toggle=”pill” 的屬性,然后通過下面的腳本來調(diào)用:
$(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); }) 實(shí)例 : <!-- 選項(xiàng)卡組件(菜單項(xiàng)nav-tabs)--> <ul id="myTab2" class="nav nav-tabs" role="tablist"> <li><a href="#a" role="tab">娛樂</a></li> <li><a href="#b" role="tab">房產(chǎn)</a></li> <li><a href="#c" role="tab">國內(nèi)</a></li> <li><a href="#d" role="tab">國外</a></li> </ul> <!-- 選項(xiàng)卡面板 --> <div id="myTabContent2" class="tab-content"> <div class="tab-pane fade in active" id="a">娛樂內(nèi)容面板</div> <div class="tab-pane fade" id="b">房產(chǎn)內(nèi)容面板</div> <div class="tab-pane fade" id="c">國內(nèi)內(nèi)容面板</div> <div class="tab-pane fade" id="d">國外內(nèi)容面板</div> </div> <script> $(function(){ $("#myTab2 a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); }) </script>
下文點(diǎn)擊查看
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 全面解析Bootstrap中tab(選項(xiàng)卡)的使用方法
- BootStrap tab選項(xiàng)卡使用小結(jié)
- bootstrap實(shí)現(xiàn)tab選項(xiàng)卡切換
- 簡單實(shí)現(xiàn)bootstrap選項(xiàng)卡效果
- bootstrap導(dǎo)航、選項(xiàng)卡實(shí)現(xiàn)代碼
- bootstrap選項(xiàng)卡擴(kuò)展功能詳解
- Bootstrap選項(xiàng)卡與Masonry插件的完美結(jié)合
- Bootstrap選項(xiàng)卡學(xué)習(xí)筆記分享
- 淺談bootstrap源碼分析之tab(選項(xiàng)卡)
- BootstrapVue選項(xiàng)卡標(biāo)題增加關(guān)閉按鈕的方法
相關(guān)文章
ionic App問題總結(jié)系列之ionic點(diǎn)擊系統(tǒng)返回鍵退出App
本篇文章主要介紹了ionic App問題總結(jié)系列之ionic點(diǎn)擊系統(tǒng)返回鍵退出App,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08使用純javascript實(shí)現(xiàn)放大鏡效果
本文給大家分享的是使用純javascript實(shí)現(xiàn)放大鏡效果的代碼,并附上封裝的步驟,做電商程序的小伙伴們一定不要錯(cuò)過。2015-03-03JavaScript實(shí)現(xiàn)移動(dòng)端頁面按手機(jī)屏幕分辨率自動(dòng)縮放的最強(qiáng)代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)移動(dòng)端頁面按手機(jī)屏幕分辨率自動(dòng)縮放的最強(qiáng)代碼,通過阻止瀏覽器的默認(rèn)行為各方面分析縮放的功能實(shí)現(xiàn),具體操作步驟大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08使用layui+ajax實(shí)現(xiàn)簡單的菜單權(quán)限管理及排序的方法
今天小編就為大家分享一篇使用layui+ajax實(shí)現(xiàn)簡單的菜單權(quán)限管理及排序的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript 彈出窗體點(diǎn)擊按鈕返回選擇數(shù)據(jù)的實(shí)現(xiàn)
這兩天一直想實(shí)現(xiàn)這個(gè),以前做做個(gè)Demo,但是不知道跑哪去了。于是今天在網(wǎng)上找了些資料再自己動(dòng)手搞定。廢話不多說。直接進(jìn)入主題啦。2010-04-04基于javascript代碼實(shí)現(xiàn)通過點(diǎn)擊圖片顯示原圖片
這篇文章主要介紹了基于javascript代碼實(shí)現(xiàn)通過點(diǎn)擊圖片顯示原圖片的相關(guān)資料,需要的朋友可以參考下2015-11-11JavaScript數(shù)據(jù)存儲(chǔ) Cookie篇
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)存儲(chǔ) Cookie篇,感興趣的朋友可以參考一下2016-07-07微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)兩邊小中間大的輪播效果的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12