ブートストラップ3のヒューリスティックスnav-pillは機能しません

Question

私はbootstrap 3を使用しており、別のものの中にnav-pillsを定義しています。

なぜ正しく動作しないのでしょうか。 a2を選択すると、その番組が私にAAAAAAAA 22222222と表示されることが期待されます。私はどこかでミスをしていますか？

jsfiddle

インラインコード：

.tab-content { 
 
    padding: 5px 12px; 
 
    border: 1px solid black; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 

 
<div id="maintab-out" class="container"> 
 
    <ul class="nav nav-pills"> 
 
    <li class="active"> 
 
     <a href="#A" data-toggle="tab">A</a> 
 
    </li> 
 
    <li> 
 
     <a href="#B" data-toggle="tab">B</a> 
 
    </li> 
 
    </ul> 
 
    <div class="tab-content clearfix"> 
 
    <div class="tab-pane active" id="A"> 
 
     <div> 
 
     <div id="maintab-A" class="container"> 
 
      <ul class="nav nav-pills"> 
 
      <li class="active"> 
 
       <a href="#a1" data-toggle="tab">a1</a> 
 
      </li> 
 
      <li> 
 
       <a href="#a2" data-toggle="tab">a2</a> 
 
      </li> 
 
      </ul> 
 
      <div class="tab-content clearfix"> 
 
      <div class="tab-pane active" id="#a1"> 
 
       <div> 
 
       AAAAAAAA 11111111 
 
       </div> 
 
      </div> 
 
      <div class="tab-pane" id="#a2"> 
 
       <div> 
 
       AAAAAAAA 22222222 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <!-- (tab-content) --> 
 
     </div> 
 
     <!-- (container) --> 
 
     </div> 
 
    </div> 
 
    <div class="tab-pane" id="B"> 
 
     <div> 
 
     <div id="maintab-B" class="container"> 
 
      <ul class="nav nav-pills"> 
 
      <li class="active"> 
 
       <a href="#b1" data-toggle="tab">b1</a> 
 
      </li> 
 
      <li> 
 
       <a href="#b2" data-toggle="tab">b2</a> 
 
      </li> 
 
      </ul> 
 
      <div class="tab-content clearfix"> 
 
      <div class="tab-pane active" id="#b1"> 
 
       <div> 
 
       BBBBBBBB 11111111 
 
       </div> 
 
      </div> 
 
      <div class="tab-pane" id="#b2"> 
 
       <div> 
 
       BBBBBBBB 22222222 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <!-- (tab-content) --> 
 
     </div> 
 
     <!-- (container) --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- (maintab-out) --> 
 

 

 
<!-- ****************************** --> 
 

 
<div class="container theme-showcase" role="main"> 
 
</div> 
 
<!-- /container --> 
 
<!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
<!-- Placed at the end of the document so the pages load faster --> 
 
<script src="js/jquery.min.js"></script> 
 
<script> 
 
    window.jQuery || document.write('<script src="js/jquery.js"><\/script>') 
 
</script> 
 
<script src="js/bootstrap.min.js"></script> 
 
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
<script src="assets/js/ie10-viewport-bug-workaround.js"></script> 
 
<script> 
 
    $(function() { 
 
    $("#maintab-A").width($("#maintab-A").width() - 100); 
 
    }); 
 
</script>

Answer 1

この

<div class="tab-pane active" id="a1"> 

の代わりに使用します。

を

<div class="tab-pane active" id="#a1"> 

idから#を削除します。