使用BootStrap實現(xiàn)標簽切換原理解析

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

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

原理解析

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

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

3.為a標簽注冊對應(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實現(xiàn)標簽切換原理解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

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