源代碼
點擊運行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實例 - 標籤頁(Tab)插件事件</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <hr> <p class="active-tab"><strong>激活的標籤頁</strong>:<span></span></p> <p class="previous-tab"><strong>前一個激活的標籤頁</strong>:<span></span></p> <hr> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab"> 教程</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>教程是一個提供最新的web技術站點,本站免費提供了建站相關的技術文檔,幫助廣大web技術愛好者快速入門併建立自己的網站。先飛早入行——學的不僅是技術,更是夢想。</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> <script> $(function(){ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // 獲取已激活的標籤頁的名稱 var activeTab = $(e.target).text(); // 獲取前一個激活的標籤頁的名稱 var previousTab = $(e.relatedTarget).text(); $(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab); }); }); </script> </body> </html>
運行結果