CODEWITHSUNDEEP
javascripttwitter-bootstrappug
Spring Beauty
Spring Beauty

Reputation: 328

Why is the active tab not changing on my page?

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.

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

Upvotes: 0

Views: 1835

Answers (1)

fustaki
fustaki

Reputation: 1614

This example can help you (try it yourself 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>

Upvotes: 1

Related Questions