javascript - Bootstrap 选项卡问题/Jquery 删除所有子元素上的 .active 类

Question

存在一个问题，当您导航到另一个选项卡时，事件类没有被删除。这意味着您不能多次访问同一个选项卡。 https://codepen.io/anon/pen/zdjawq

选项卡的工作示例可以在以下笔的示例二中看到 https://codepen.io/wizly/pen/BlKxo

<div id="exTab2" class="container">
    <ul class="nav nav-tabs">
      <div class="col-md-2">
        <li>
          <a href="#1" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>
      <div class="col-md-2">
        <li>
          <a href="#2" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>
      <div class="col-md-2">
        <li class="active">
          <a href="#3" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>
      <div class="col-md-2">
        <li>
          <a href="#4" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>
      <div class="col-md-2">
        <li>
          <a href="#5" data-toggle="tab">
            <img src="https://t7.rbxcdn.com/1397cd00dfbf1347145a10a38b1386d4" style="height: 100px;" class="img-circle">
          </a>
        </li>
      </div>

    </ul>

    <div class="tab-content">
      <div class="tab-pane" id="1">
        test
      </div>
      <div class="tab-pane" id="2">
        cont
      </div>

      <div class="tab-pane active" id="3">
        other
      </div>

Answer 1

在您的代码中，您需要删除 ul 和 li 元素之间的 div。这破坏了选项卡正确工作的正确 DOM 结构。