亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用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對(duì)應(yīng)的id

3.為a標(biāo)簽注冊(cè)對(duì)應(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">首頁(yè)</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>首頁(yè)內(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)簽切換原理解析，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論