为什么单击 tab2 时总是显示 tab1 的内容？答案

【问题标题】：Why when tab2 is clicked it appears always the content of the tab1?为什么单击 tab2 时总是显示 tab1 的内容？
【发布时间】：2018-06-14 15:50:21
【问题描述】：

我有一些使用 bootstrap 4 的选项卡。在 ID 为“mytabs”的选项卡中，我还有另外两个选项卡。在“#mytabs”内的这个选项卡中，这是一个问题。如果我点击“tab1”链接，它会出现 tab1 的内容，但如果我点击“tab2”链接，它仍然会出现“tab1”的内容。

你知道问题出在哪里吗？

解决问题：https://jsfiddle.net/cv25swga/8/

HTML：

<body>
  <div class="bg-light-gray2">
    <div class="container nopadding py-4">
      <div class="row mt-3">
        <div class="col-12">
          <ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">

            <!-- other tab links --> 

            <li class="disabled">
              <a class="nav-link" href="#mytabs" data-toggle="tab" role="tab">
                <i class="fa fa-lock" aria-hidden="true"></i> 
                <span class="d-none d-lg-inline-block">Access Data</span>
              </a>
            </li>

          </ul>


          <div class="tab-content registration_body bg-white" id="myTabContent">

            <div class="tab-pane clearfix fade" id="mytabs" role="tabpanel"
                 aria-labelledby="contact-tab">

              <div class="d-flex mb-3">
                <ul class="nav nav-pills">
                  <li class="nav-item">
                    <a class="nav-link active border" id="tab1" href="#tab1"
                       data-toggle="tab"
                       role="tab">tab1</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link border" id="tab2" href="#tab2"
                       data-toggle="tab" role="tab">tab2</a>
                  </li>
                </ul>
              </div>
              <div class="tab-content bg-white" id="myTabContent">
                <div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel"
                     aria-labelledby="home-tab">
                  tab1
                </div>

                <div class="tab-pane fade show clearfix" id="tab2" role="tabpanel"
                     aria-labelledby="home-tab">

                  tab2

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这是因为您的选项卡和链接具有相同的 ID。

更改您的 ID，使其在页面上是唯一的，问题就会消失。

【讨论】：

实际上只需从链接中删除 id 就足够了。他们不需要
好点。在提出的问题中，没有指定是否需要 id。也许他在他的 css 或其他一些 javascript 调用中使用它们。我只是选择了最安全的答案。
确实如此。但是，我为这些 id 意外添加的情况添加了注释。因此只有一个评论:)