Question

我有一些使用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>

Answer 1

这是因为您的标签和链接都具有相同的ID。

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

为什么单击tab2时它始终显示tab1的内容？

1 个答案: