Bootstrap Tabs не работает, но код отлично выглядит

Это первый раз, когда мои загрузочные вкладки не работают, мой код прост и все выглядит нормально, но в моей системе это не работает.Bootstrap Tabs не работает, но код отлично выглядит

Ниже мой код

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
    <title>Tabs </title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title"> 
</head> 
<body> 
    <div class="container"> 
     <ul class="nav nav-tabs" id="myTab"> 
      <li class="active"><a href="#home">Home</a></li> 
      <li><a href="#profile">Profile</a></li> 
      <li><a href="#messages">Messages</a></li> 
      <li><a href="#settings">Settings</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div class="tab-pane active" id="home">home</div> 
      <div class="tab-pane" id="profile">profile</div> 
      <div class="tab-pane" id="messages">messages</div> 
      <div class="tab-pane" id="settings">settings</div> 
     </div> 
    </div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</body> 
</html>

источник

2016-11-03 Muhammad Talha

Добавить данные рычажками = "закладка" на якорь

<!DOCTYPE html> 
<html lang="ENG"> 
<head> 
    <!-- Required meta tags always come first--> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Title Page</title> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css"> 
    </head> 
    <body> 
    <div class="container"> 
    <ul class="nav nav-tabs"> 
     <li class="nav-item"> 
      <a data-toggle="tab" href="#home" class="nav-link active">Active 1</a> 
     </li> 
     <li class="nav-item"> 
      <a data-toggle="tab" href="#profile" class="nav-link">Active 2</a> 
     </li> 
     <li class="nav-item"> 
      <a data-toggle="tab" href="#message" class="nav-link">Active 3</a> 
     </li> 
     <li class="nav-item"> 
      <a data-toggle="tab" href="#settings" class="nav-link">Disabled</a> 
     </li> 
    </ul> 

    <div class="tab-content"> 
     <div class="tab-pane fade in active" id="home">home</div> 
     <div class="tab-pane fade" id="profile">profile</div> 
     <div class="tab-pane fade" id="message">messages</div> 
     <div class="tab-pane fade" id="settings">settings</div> 
    </div> 
    </div> 

    <!-- jQuery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <!-- Bootstrap JavaScript --> 
    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap --> 
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
    </body> 
    </html>

источник

2016-11-03 08:28:21

Bootstrap Tabs не работает, но код отлично выглядит

ответ

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