ブートストラップのタブの発行/ Jqueryのすべての子要素の.activeクラスの削除

Question

別のタブに移動するときにアクティブなクラスが削除されないという問題があります。つまり、同じタブを複数回訪問することはできません。 https://codepen.io/anon/pen/zdjawq

タブの作業例 あなたはulとli要素の間div Sを削除する必要があり、あなたのコードでは、次のペン https://codepen.io/wizly/pen/BlKxo

<div id="exTab2" class="container"> 
    <ul class="nav nav-tabs"> 
     <div class="col-md-2"> 
     <li> 
      <a href="#1" data-toggle="tab"> 
      <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle"> 
      </a> 
     </li> 
     </div> 
     <div class="col-md-2"> 
     <li> 
      <a href="#2" data-toggle="tab"> 
      <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle"> 
      </a> 
     </li> 
     </div> 
     <div class="col-md-2"> 
     <li class="active"> 
      <a href="#3" data-toggle="tab"> 
      <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle"> 
      </a> 
     </li> 
     </div> 
     <div class="col-md-2"> 
     <li> 
      <a href="#4" data-toggle="tab"> 
      <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle"> 
      </a> 
     </li> 
     </div> 
     <div class="col-md-2"> 
     <li> 
      <a href="#5" data-toggle="tab"> 
      <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle"> 
      </a> 
     </li> 
     </div> 

    </ul> 

    <div class="tab-content"> 
     <div class="tab-pane" id="1"> 
     test 
     </div> 
     <div class="tab-pane" id="2"> 
     cont 
     </div> 

     <div class="tab-pane active" id="3"> 
     other 
     </div> 

Answer 1

の例2で見ることができます。これは、タブが正しく機能するための正しいDOM構造を破っていることです。