欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年03月14日 09:02:16   作者：納蘭思途  
本文給大家分享使用BootStrap實現(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實現(xiàn)標(biāo)簽切換原理解析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論