Почему активная вкладка не изменяется на моей странице?

Когда я нажимаю на вкладку, имя/# изменяется. Однако выделенная вкладка, указывающая, что это активная вкладка, не изменяется. Содержимое также не изменяется, и содержимое, связанное со вкладкой по умолчанию, продолжает отображаться.Почему активная вкладка не изменяется на моей странице?

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

Почему активная вкладка не изменяется на моей странице?

ответ

Смежные вопросы