ブートストラップナビゲーションタブ：アクティブなクラスのdoesntの仕事

Question

ここではHTMLのコードは次のとおりです。

<div class="process"> 
     <h2 style="text-transform: uppercase;">The Application Process</h2> 
     <br><br> 
     <div class="row"> 
     <div class="col-md-3" align="left"> 
      <ul class="nav nav-pills flex-column" id="myTab" role="tablist"> 
      <li class="nav-item"> 
       <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a> 
      </li> 
      </ul>    
     </div> 
     <div class="col-md-9"> 
      <div class="tab-content"> 
      <div class="tab-pane active" id="home" role="tabpanel">a</div> 
      <div class="tab-pane" id="profile" role="tabpanel">b</div> 
      <div class="tab-pane" id="messages" role="tabpanel">c</div> 
      <div class="tab-pane" id="settings" role="tabpanel">d</div> 
      </div> 
     </div> 
     </div> 
    </div> 

そしてここでは、JSのコードは次のとおりです。

<script> 
    $(function() { 
    $('#myTab a:last').tab('show') 
    }) 
    $('ul.nav-pills li a').click(function (e) { 
    $('ul.nav-pills li.active').removeClass('active') 
    $(this).parent('li').addClass('active') 
    }) 
</script> 

アクティブなクラスを持っているNAVがホームNAVですが、何とか設定はアクティブな人の設定です。私は何度も検索しようとしましたが、答えが見つかりません。

これはjavascriptクラスかコンテナクラスですか？私はすでにdiv "process"の前にコンテナを使用しているからです。ありがとう。

Answer 1

ブートストラップJSを追加し、あなたのJSコードを取り除く場合は、それが動作するはずです：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<div class="process"> 
 
     <h2 style="text-transform: uppercase;">The Application Process</h2> 
 
     <br><br> 
 
     <div class="row"> 
 
     <div class="col-md-3" align="left"> 
 
      <ul class="nav nav-pills flex-column" id="myTab" role="tablist"> 
 
      <li class="nav-item active"> 
 
       <a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a> 
 
      </li> 
 
      </ul>    
 
     </div> 
 
     <div class="col-md-9"> 
 
      <div class="tab-content"> 
 
      <div class="tab-pane active" id="home" role="tabpanel">a</div> 
 
      <div class="tab-pane" id="profile" role="tabpanel">b</div> 
 
      <div class="tab-pane" id="messages" role="tabpanel">c</div> 
 
      <div class="tab-pane" id="settings" role="tabpanel">d</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

・ホープ、このことができます。 :)