使用BootStrap實(shí)現(xiàn)標(biāo)簽切換原理解析

更新時(shí)間：2017年03月14日 09:02:16 作者：納蘭思途

本文給大家分享使用BootStrap實(shí)現(xiàn)標(biāo)簽切換原理解析及核心代碼，需要的朋友參考下

原理解析

1.定義一無序列表。取id值為myTab。

2.定義列表中a標(biāo)簽的目標(biāo)地址為我們要展示的div對應(yīng)的id

3.為a標(biāo)簽注冊對應(yīng)的事件（就是js的代碼）

效果如圖

這里寫圖片描述

代碼如下

html代碼部分

 <ul id="myTab" class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#home" rel="external nofollow" data-toggle="tab">首頁</a></li>
    <li role="presentation"><a href="#profile" rel="external nofollow" >介紹</a></li>
    <li role="presentation"><a href="#dropdown1" rel="external nofollow" >消息</a></li>
  </ul>
  <div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home"><p>首頁內(nèi)容..</p> </div>
    <div class="tab-pane fade" id="profile"> <p>介紹內(nèi)容...</p></div>
    <div class="tab-pane fade" id="dropdown1">
      <p>.消息內(nèi)容..</p>
    </div>
  </div>

js部分代碼

<script type="text/javascript">
   $('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    });
</script>

以上所述是小編給大家介紹的使用BootStrap實(shí)現(xiàn)標(biāo)簽切換原理解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換效果
這篇文章主要介紹了javascript點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換效果，以一個(gè)完整的實(shí)例為大家分析了js點(diǎn)擊按鈕實(shí)現(xiàn)隱藏顯示切換的功能，感興趣的小伙伴們可以參考一下
2016-02-02
uniapp開發(fā)微信小程序遇到的問題筆記
這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)微信小程序遇到的問題的相關(guān)資料,比較適合第一次使用uniapp?開發(fā)微信小程序的伙伴,或者沒有過實(shí)戰(zhàn)經(jīng)驗(yàn)的小伙伴參考,需要的朋友可以參考下
2023-01-01
js實(shí)現(xiàn)圖片加載淡入淡出效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片加載淡入淡出效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
五句話幫你輕松搞定js原型鏈
這篇文章主要給大家介紹了關(guān)于js原型鏈的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
JavaScript面試必備技巧之手寫一個(gè)Promise
很多同學(xué)在面試的時(shí)候都會被要求手寫一個(gè)Promise,那么今天我總結(jié)了一些手寫Promise的方法，可以跟著我的思路一起來實(shí)現(xiàn)一個(gè)Promise,讓我們的面試更有把握
2023-02-02
JavaScript實(shí)現(xiàn)判斷時(shí)間間隔是否連續(xù)為一天
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)判斷時(shí)間間隔是否連續(xù)為一天,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下
2024-01-01
微信小程序中多個(gè)頁面?zhèn)鲄⑼ㄐ诺膶W(xué)習(xí)與實(shí)踐
剛接觸微信小程序，對里面的語法和屬性還不怎么了解，最近正在努力學(xué)習(xí)中，下面這篇文章主要給大家介紹了微信小程序中多個(gè)頁面?zhèn)鲄⑼ㄐ诺南嚓P(guān)資料，是最近學(xué)習(xí)的一個(gè)內(nèi)容總結(jié)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-05-05
實(shí)例分析瀏覽器中“JavaScript解析器”的工作原理
本文主要對javascript解析器的工作原理進(jìn)行實(shí)例分析，具有很好的參考價(jià)值，下面就跟小編一起來看下吧
2016-12-12
微信小程序?qū)崿F(xiàn)滑動刪除
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
JS實(shí)現(xiàn)簡單打磚塊彈球小游戲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單打磚塊彈球小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05