title: Why is the active tab not changing on my page?
body: <p>when I click on a tab the /#name changes. However, the highlighted tab indicating that it is the active tab does not change. The content also does not change and the content associated with the default tab continues to be displayed.</p>
  
  <pre><code>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
                          &lt;!-- Draw two bars in navbar button when the window is small --&gt;
                          span.icon-bar
                          span.icon-bar
                  ul.nav.navbar-nav
                      &lt;!-- Setup the default active tab --&gt;
                      li.active
                          a(href="#db1Tab", data-toggle="tab") DB1
                      &lt;!-- The tabs on standby --&gt;
                      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
  </code></pre>