bootstrap 3中的启发式导航丸不起作用

Question

我正在使用bootstrap 3并在另一个内部定义一个nav-pills。

我想知道它为什么不能正常工作。当我选择AAAAAAAA 22222222时，我希望它会显示a2。我在某个地方犯了错误吗？

jsfiddle

内联代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用此

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

而不是：

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

从ID中删除#。

更新了fiddle