Bootstrap 標籤頁（Tab）外掛
阿新 • • 發佈：2019-01-25
您可以通過以下兩種方式啟用標籤頁：
1、通過 data 屬性：您需要新增 data-toggle="tab" 或
data-toggle="pill" 到錨文字連結中新增 nav 和 nav-tabs 類到
ul 中，將會應用 Bootstrap
標籤樣式，新增 nav 和 nav-pills 類到 ul 中，將會應用 Bootstrap
膠囊式樣式。
2、通過 JavaScript：您可以使用 Javscript 來啟用標籤頁，如下所示：<ul class="nav nav-tabs"> <li><a href="#identifier" data-toggle="tab">Home</a></li> ... </ul>
$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')})html程式碼<div class="tab-content"> <div class="tab-pane fade in active" id="home">...</div> <div class="tab-pane fade" id="svn">...</div> <div class="tab-pane fade" id="ios">...</div> <div class="tab-pane fade" id="java">...</div></div>
效果圖<body> <div class="container"> <ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> W3Cschool Home </a> </li> <li> <a href="#ios" data-toggle="tab">iOS</a> </li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle"data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li> <a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a> </li> <li> <a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a> </li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p> W3CschooolW3Cschool教程是一個提供最新的web技術站點，本站免費提供了建站相關的技術文件，幫助廣大web技術愛好者快速入門並建立自己的網站。菜鳥先飛早入行——從W3Cschool開始。 </p> </div> <div class="tab-pane fade" id="ios"> <p> iOS 是一個由蘋果公司開發和釋出的手機作業系統。最初是於 2007 年首次釋出 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 作業系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> </div> <div class="tab-pane fade" id="jmeter"> <p> jMeter 是一款開源的測試軟體。它是 100% 純 Java 應用程式，用於負載和效能測試。 </p> </div> <div class="tab-pane fade" id="ejb"> <p> Enterprise Java Beans（EJB）是一個建立高度可擴充套件性和強大企業級應用程式的開發架構，部署在相容應用程式伺服器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body>
