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

问题描述

我有一些使用引导程序 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>

标签： javascriptjqueryhtmlcsstwitter-bootstrap

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

问题描述

解决方案

推荐阅读