引导的导航选项卡：活动类不工作

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> 

有活动类是家庭资产净值资产净值，但不知何故设置是活动的人。我试图搜索很多次，但没有找到答案。

它是JavaScript还是容器类？因为我已经在div“进程”之前使用了容器。谢谢。

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>

希望这有助于。 :)