爲什麼活動標籤在我的頁面上沒有改變？

當我點擊一個標籤時/＃名稱改變。但是，突出顯示的選項卡指示它是活動選項卡不會更改。內容也不會更改，並且繼續顯示與默認選項卡關聯的內容。爲什麼活動標籤在我的頁面上沒有改變？

doctype html 
html 
head 
    title Bootstrap Tab this Database 
    script(src="/socket.io/socket.io.js") 
    script(src="client.js") 
    link(rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css") 
body 
    div.container 
     nav.navbar.navbar-default.navbar-inverse 
      div.container-fluid 
       div.navbar-header 
        button(type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false") 
         span.sr-only 
         <!-- Draw two bars in navbar button when the window is small --> 
         span.icon-bar 
         span.icon-bar 
       ul.nav.navbar-nav 
        <!-- Setup the default active tab --> 
        li.active 
         a(href="#db1Tab", data-toggle="tab") DB1 
        <!-- The tabs on standby --> 
        li 
         a(href="#db2Tab", data-toggle="tab") DB2 
    div.tab-content 
     div(id="db1Tab").tab-pane.fade.in.active 
      include db1 
     div(id="db2Tab").tab-pane.fade 
      include db2

來源

2017-02-16 Student

這個例子可以幫助你（自己嘗試一下here）：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Dynamic Tabs</h2> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
    </div> 
    <div id="menu3" class="tab-pane fade"> 
     <h3>Menu 3</h3> 
    </div> 
    </div> 
</div> 

</body> 
</html>

來源

2017-02-16 23:00:46 fustaki

謝謝。我將使用您的示例代碼作爲基礎，並將我需要的代碼移植到其中。我仍然想知道爲什麼我以前的代碼不工作。這似乎與沒有正確鏈接boostrap.min.css和boostrap.min.js有關。我認爲在我的原始代碼中，我只能鏈接到boostrap.min.css – Student

爲什麼活動標籤在我的頁面上沒有改變？

回答

相關問題