アクティブなブートストラップタブを切り替えるには？

私が見る限り、私はブートストラップタブ（https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp）に関してw3の例を丁度追ってきました。しかし私の次のコードでは、クリックするとタブが変わらない。表示される唯一のタブはアクティブなタブです。私は非常にブートストラップに精通していないので、私はソリューションがおそらく簡単かもしれないと想像しています。アクティブなブートストラップタブを切り替えるには？

HTML：W3から

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Login</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="css/login.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <script src="js/login.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

</head> 

<body> 
    <div class="container"> 
    <!-- <div id="tabs" class="container"> --> 
     <ul class="nav nav-tabs"> 
     <li class="active"> 
      <a data-toggle="tab" href="#student">Student</a> 
     </li> 

     <li> 
      <a data-toggle="tab" href="#employee">Employee</a> 
     </li> 

     <li> 
      <a data-toggle="tab" href="#admin">Admin</a> 
     </li> 
     </ul> 

     <div class="tab-content"> 
     <div id="student" class="tab-pane fade in active"> 
      <h1>TEST</h1> 
     </div> 
     <div id="employee" class="tab-pane fade"> 
      <h1>TEST2</h1> 
     </div> 
     <div id="admin" class="tab-pane fade"> 
      <h1>TEST3</h1> 
     </div> 
     </div> 

    <!-- </div> --> 
    </div> 

</body> 
</html>

出典

2017-11-14 Xander

このコードはうまく動作します。あなたはlogin.jsでやっていることは何ですか？タブが機能しない原因になることがあります。 – Shashank

@Shashank空のファイルは、今後の使用のためだけにあります – Xander

私は問題を考え出しました。 jQueryとブートストラップの順序を変更するだけです。最初はjQuery、次にブートストラップにする必要があります。それがそれであるはずです。 – Shashank

の例では、いずれかの動作していません！この

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Login</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="css/login.css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

     <script src="js/login.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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"> 
      <!-- Nav tabs --> 
      <ul class="nav nav-tabs" role="tablist"> 
       <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> 
       <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> 
       <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> 
       <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> 
      </ul> 

      <!-- Tab panes --> 
      <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane active" id="home"> 
        TEST 1 
       </div> 
       <div role="tabpanel" class="tab-pane" id="profile"> 
        TEST 2 
       </div> 
       <div role="tabpanel" class="tab-pane" id="messages"> 
        TEST 3 
       </div> 
       <div role="tabpanel" class="tab-pane" id="settings"> 
        TEST 4 
       </div> 
      </div> 

     </div> 
    </body> 
</html>

を試してみて確認してください：https://getbootstrap.com/docs/3.3/javascript/#tabsの詳細については

EDIT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

この行はこのように、bootstrap.min.js前に行かなければならない：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

出典

2017-11-14 17:52:20

これはうまくいくはずです –

login.cssがbootstrapから何かを上書きしている場合は、bootstrap.min.cssの後に置く必要があります。これはcssの動作のためです。https://www.codeavengers.com/ notes/priority-rules（あなたが "css priority rules"を検索したときの最初のリンクの1つ。 –

アクティブなブートストラップタブを切り替えるには？

答えて

関連する問題