Question

这里关注的是...我点击的标签必须是唯一选中的标签，即使我的页面上有两组标签（如下所示）：

http://codepen.io/mutualdesigns/pen/pbGjbX

注意：一旦我点击其中一个标签，然后点击下面一个标签，我就会同时选中两个标签。如果我有第三组选项卡，并点击第三组上的链接，我将有3个激活（选定）链接...

我如何才能获得我所选择的链接（即使其他任何一个选项中还有其他选项）？

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#1" aria-controls="1" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#2" aria-controls="2" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#3" aria-controls="3" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#4" aria-controls="4" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation"><a href="#5" aria-controls="5" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#6" aria-controls="6" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#7" aria-controls="7" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#8" aria-controls="8" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="1">1</div>
    <div role="tabpanel" class="tab-pane" id="2">2</div>
    <div role="tabpanel" class="tab-pane" id="3">3</div>
    <div role="tabpanel" class="tab-pane" id="4">4</div>
    <div role="tabpanel" class="tab-pane" id="5">5</div>
    <div role="tabpanel" class="tab-pane" id="6">6</div>
    <div role="tabpanel" class="tab-pane" id="7">7</div>
    <div role="tabpanel" class="tab-pane" id="8">8</div>
  </div>

</div>

Answer 1

解决方案（既不是最好的，也不是最漂亮的）如下。我基于here

提出的建议

<script>
    function toggle(clickedElem) {
        // Store all active elements in a variable for later use
        var elements = document.querySelectorAll(".nav-tabs li.active"); 
        // Iterate over the elements and remove the active class from the classlist. We made sure there was a active class by using the querySelector
        for (var i = 0; i < elements.length; i++) {
            elements[i].classList.remove('active');
        }
        // Add the active class to the parent of the clicked link
        clickedElem.parentElement.classList.add("active");
    }
</script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#1" aria-controls="1" role="tab" data-toggle="tab" onclick="toggle(this)">Home</a></li>
    <li role="presentation"><a href="#2" aria-controls="2" role="tab" data-toggle="tab" onclick="toggle(this)">Profile</a></li>
    <li role="presentation"><a href="#3" aria-controls="3" role="tab" data-toggle="tab" onclick="toggle(this)">Messages</a></li>
    <li role="presentation"><a href="#4" aria-controls="4" role="tab" data-toggle="tab" onclick="toggle(this)">Settings</a></li>
</ul>
<!--not going to be repeating the same code but the rest of your code continues here(add the onclick to the other tags obviously)-->

这也可以使用jQuery完成。为此，您正在使用toggleClass或removeClass / addClass

P.S。 强调文字（在编辑器中点击 I 后的模板。

一个页面中有两组选项卡，单击后只保留一个选项卡（SELECTED）

1 个答案: