如何使用BootStrap實現(xiàn)標簽切換

這篇文章將為大家詳細講解有關(guān)如何使用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>

關(guān)于“如何使用BootStrap實現(xiàn)標簽切換”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。