BootStrap中Tab頁(yè)簽切換實(shí)例代碼
關(guān)于$().tab()一般用來實(shí)現(xiàn)標(biāo)簽頁(yè)和膠囊鏈接內(nèi)容片段的切換,或是相關(guān)內(nèi)容的頁(yè)面導(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');//初始化顯示哪個(gè)tab $('#myTab a').click(function (e) { e.preventDefault();//阻止a鏈接的跳轉(zhuǎn)行為 $(this).tab('show');//顯示當(dāng)前選中的鏈接及關(guān)聯(lián)的content }) }) </script>
此外,你還可以有更多靈活的方式來激活某個(gè)特定的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');
以上代碼需要注意的一點(diǎn)是,每個(gè)li中的a標(biāo)簽都要有個(gè)href=#id,這個(gè)id指向的正是該鏈接對(duì)應(yīng)的content的id,如果使用javascript實(shí)現(xiàn)這種導(dǎo)航內(nèi)容的切換,a標(biāo)簽中無須再添加data-toggle='tab',當(dāng)然,如果每個(gè)a鏈接都使用了此屬性,那完全沒有必要在用js來實(shí)現(xiàn)了。
- Android仿淘寶商品瀏覽界面圖片滾動(dòng)效果
- Android中解決頁(yè)簽手指按下從左到右滑動(dòng)的bug
- jquery tools之tabs 選項(xiàng)卡/頁(yè)簽
- 基于Jquery實(shí)現(xiàn)的一個(gè)圖片滾動(dòng)切換
- jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
- JQuery 圖片滾動(dòng)輪播示例代碼
- js實(shí)現(xiàn)網(wǎng)站首頁(yè)圖片滾動(dòng)顯示
- jQuery+css實(shí)現(xiàn)圖片滾動(dòng)效果(附源碼)
- Android仿人人客戶端滑動(dòng)菜單的側(cè)滑菜單效果
- Android實(shí)現(xiàn)圖片滾動(dòng)和頁(yè)簽控件功能的實(shí)現(xiàn)代碼
相關(guān)文章
微信小程序通過點(diǎn)擊事件傳參(data-)的操作示例
微信小程序可以通過直接寫 data-index="1" 進(jìn)行數(shù)據(jù)的綁定 ,利用 bindtap 點(diǎn)擊事件執(zhí)行函數(shù)從而獲取到參數(shù)信息,本文給大家介紹微信小程序通過點(diǎn)擊事件傳參(data-)的操作,感興趣的朋友一起看看吧2023-12-12利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn)
這篇文章主要為大家介紹了利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn),感興趣的小伙伴們可以參考一下2016-08-08JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-10-10原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
本文給大家分享的是使用原生的javascript實(shí)現(xiàn)的響應(yīng)式的瀑布流布局的方法和源碼,非常的實(shí)用,有需要的小伙伴可以參考下。2015-04-04Javascript中引用類型傳遞的知識(shí)點(diǎn)小結(jié)
這篇文章主要給大家介紹了關(guān)于Javascript中引用類型傳遞的知識(shí)點(diǎn),文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-03-03JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請(qǐng)求
當(dāng)我們?cè)陂_發(fā)時(shí)遇到需要同時(shí)發(fā)起百條接口請(qǐng)求怎么辦呢,本文主要來和大家介紹一下JavaScript如何使用Promise實(shí)現(xiàn)分批處理接口請(qǐng)求,需要的可以參考下2024-03-03js獲取當(dāng)前年月日詳細(xì)教程(看這一篇就夠了)
這篇文章主要給大家介紹了關(guān)于js獲取當(dāng)前年月日的相關(guān)資料,JavaScript內(nèi)置的Date對(duì)象是獲取當(dāng)前日期最常用的工具之一,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12