bootstrap tab切換功能
阿新 • • 發佈：2022-05-31
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>bootstrap tab切換</title> <!--引入bootstrap樣式檔案--> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--引入jq（必須在bootstrap.min.js檔案之前）--> <script type="application/javascript" src="js/jquery-3.4.1.min.js"></script> <!--引入bootstrap js--> <script type="application/javascript" src="js/bootstrap.min.js"></script> </head> <body style="margin: 60px"> <div class="tab-nav-main"> <ul id="myTabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a data-toggle="tab" href="#java">Java</a></li> <li role="presentation"><a role="tab" href="#bootstrap">Bootstrap</a></li> <li role="presentation"><a role="tab" data-toggle="tab" href="#javascript">Javascript</a></li> <li role="presentation"><a role="tab" data-toggle="tab" href="#php">PHP</a></li> </ul> <div id="tab-content" class="tab-content"> <div role="tabpanel" class="tab-pane fade in active" id="java"> <p>Java是一種廣泛使用的計算機程式語言，擁有跨平臺、面向物件、泛型程式設計的特性，廣泛應用於企業級Web應用開發和移動應用開發。</p> </div> <div role="tabpanel" class="tab-pane fade" id="bootstrap"> <p>Bootstrap是一組用於網站和網路應用程式開發的開源前端（所謂“前端”，指的是展現給終端使用者的介面。與之對應的“後端”是 在伺服器上面執行的程式碼）框架，包括HTML、CSS及JavaScript的框架，提供字型排印、窗體、按鈕、導航及其他各種元件及Javascript擴充套件，旨在使動態網頁和Web應用的開發更加容易。</p> </div> <div role="tabpanel" class="tab-pane fade" id="javascript"> <p>JavaScript，一種高階程式語言，通過解釋執行，是一門動態型別，面向物件（基於原型）的直譯語言[4]。它已經由ECMA （歐洲電腦製造商協會）通過ECMAScript實現語言的標準化[4]。它被世界上的絕大多數網站所使用，也被世界主流瀏覽器 （Chrome、IE、FireFox、Safari、Opera）支援。JavaScript是一門基於原型、函式先行的語言[5]，是一門多正規化的語言， 它支援面向物件程式設計，指令式程式設計，以及函數語言程式設計。它提供語法來操控文字、陣列、日期以及正則表示式等，不支援I/O，比如網路、 儲存和圖形等，但這些都可以由它的宿主環境提供支援。</p> </div> <div role="tabpanel" class="tab-pane fade" id="php"> <p> PHP（全稱：PHP：Hypertext Preprocessor，即“PHP：超文字前處理器”）是一種開源的通用計算機指令碼語言，尤其適用於 網路開發並可嵌入HTML中使用。PHP的語法借鑑吸收C語言、Java和Perl等流行計算機語言的特點，易於一般程式設計師學習。 PHP的主要目標是允許網路開發人員快速編寫動態頁面，但PHP也被用於其他很多領域。[1] </p> </div> </div> </div> <!--第二個切換--> <div class="tabbable"> <!-- Only required for left/right tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> <li><a href="#tab2" data-toggle="tab">Section 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>I'm in Section 1.</p> </div> <div class="tab-pane" id="tab2"> <p>Howdy, I'm in Section 2.</p> </div> </div> </div> <script> $(function () { $("#myTabs a:eq(1)").click( function (e) { e.preventDefault(); $(this).tab('show'); } ) }) </script> </body> </html>