BootStrap中Tab頁簽切換實例代碼
更新時間：2016年05月30日 15:54:15 作者：lrfgjj2
這篇文章主要介紹了BootStrap中Tab頁簽切換實例代碼的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
關(guān)于$().tab()一般用來實現(xiàn)標簽頁和膠囊鏈接內(nèi)容片段的切換，或是相關(guān)內(nèi)容的頁面導(dǎo)航：
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<script>
$(function () {
$('#myTab a:last').tab('show');//初始化顯示哪個tab
$('#myTab a').click(function (e) {
e.preventDefault();//阻止a鏈接的跳轉(zhuǎn)行為
$(this).tab('show');//顯示當前選中的鏈接及關(guān)聯(lián)的content
})
})
</script>
此外，你還可以有更多靈活的方式來激活某個特定的tab：
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show');
以上代碼需要注意的一點是，每個li中的a標簽都要有個href=#id,這個id指向的正是該鏈接對應(yīng)的content的id，如果使用javascript實現(xiàn)這種導(dǎo)航內(nèi)容的切換，a標簽中無須再添加data-toggle='tab'，當然，如果每個a鏈接都使用了此屬性，那完全沒有必要在用js來實現(xiàn)了。
相關(guān)文章
詳解如何構(gòu)建Promise隊列實現(xiàn)異步函數(shù)順序執(zhí)行
這篇文章主要介紹了詳解如何構(gòu)建Promise隊列實現(xiàn)異步函數(shù)順序執(zhí)行，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本篇我們用同樣的原理，把文字用CLIP屬性分的更細，分別著色，然后組合到一起，實現(xiàn)自左到右更精確的色彩漸變。問題是文字細化分割需要用到很多很多個元素，所以這里我們要用程序來控制，自動生成這些元素。2008-11-11
以JSON形式將JS中Array對象數(shù)組傳至后臺的方法
業(yè)務(wù)是需要將前臺jQuery easyUI DataGrid列表中所選的若干行的數(shù)據(jù)傳到后臺進行update操作，具體的實現(xiàn)如下，感興趣的朋友可以參考下2014-01-01
枚舉JavaScript對象的函數(shù)...2006-12-12
下面小編就為大家?guī)硪黄狫S獲取和修改元素樣式的實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
在登錄頁經(jīng)常會用到通過點擊文本框的類似小眼睛圖片來實現(xiàn)隱藏顯示密碼的功能。下面給大家介紹基于JS實現(xiàn)登錄頁密碼的顯示和隱藏功能，需要的朋友參考下吧2017-12-12
這篇文章主要為大家詳細介紹了js Canvas繪制圓形時鐘效果的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這個方法是很常用的，比如在驗證輸入日期是否存在時，可以使用它，如果是一個不存在的日期，則其返回值將是NaN，另外如果要比較兩個日期的先后，或是計算兩個日期相差的天數(shù) ，都可以用到。2010-07-07
這篇文章主要為大家介紹了weakMap為什么是弱引用原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了javascript實現(xiàn)二叉樹遍歷的代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06