为什么我的页面上的活动标签没有改变？答案

【问题标题】：Why is the active tab not changing on my page?为什么我的页面上的活动标签没有改变？
【发布时间】：2017-02-16 22:39:40
【问题描述】：

当我单击一个选项卡时，/#name 会发生变化。但是，指示它是活动选项卡的突出显示选项卡不会改变。内容也不会改变，与默认选项卡关联的内容会继续显示。

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

【问题讨论】：

标签： javascript twitter-bootstrap pug

【解决方案1】：

这个例子可以帮助你（自己试试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>

【讨论】：

谢谢。我将使用您的示例代码作为基础，并将我需要的内容移植到其中。我仍然想确切地知道为什么我以前的代码不起作用。这似乎与没有正确链接 boostrap.min.css 和 boostrap.min.js 有关。我认为在我的原始代码中我只是链接到 boostrap.min.css