溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用BootStrap實現標簽切換，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
原理解析
1.定義一無序列表。取id值為myTab。
2.定義列表中a標簽的目標地址為我們要展示的div對應的id
3.為a標簽注冊對應的事件（就是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>首頁內容..</p> </div> <div class="tab-pane fade" id="profile"> <p>介紹內容...</p></div> <div class="tab-pane fade" id="dropdown1"> <p>.消息內容..</p> </div> </div>
js部分代碼
<script type="text/javascript">
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
</script>關于“如何使用BootStrap實現標簽切換”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
