Javascript 在一个页面中有两组选项卡，单击后仅保持一个处于激活（选中）状态

这里的重点是。。。我单击的选项卡必须是唯一选中的选项卡，即使我的页面上有两组选项卡（如下所示）：

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

如何仅获取所单击的链接（即使在其他选项卡集中有另一个选择）

1.
2.
3.
4.
5.
6.
7.
8.
解决方案（既不是最好的，也不是最漂亮的）如下所示。我大致是根据给出的建议来做的


功能切换（单击菜单项）{
//将所有活动元素存储在一个变量中以供以后使用
var元素=document.queryselectoral（“.nav tabs li.active”）；
//迭代元素并从类列表中删除活动类。我们使用querySelector确保存在活动类
对于（var i=0；i






这也可以使用jQuery完成。因为你会使用或/

p.S.强调文本（在编辑器中单击I后创建模板。
不要大声喊叫，这无助于回答您的问题。在将类添加到上次单击的选项卡之前，您是否考虑过在JS中循环所有选项卡并从选项卡中删除所有“活动”css类。我不是故意大声喊叫，只是为了强调，很抱歉。我已经尝试过了，但没有成功。另外，uno。。。非常接近我试图解决的一个问题。我有一个有多个选项卡的页面，第一个（“活动”）选项卡将重点放在回帖上……我会问一个问题：但是我因为问了不好的问题而被禁止……jaja。
<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>

<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)-->