Javascript将活动标签置于粗体

Question

嗨，我正在尝试将活动标签设为粗体。 我想我缺少了一些东西。 所以这是我的标签：

 <div class="nav">
      <span id="tab1">tab1</span>| <span id="tab2">tab2</span>| <span id="tab3">tab3 </span>
</div>
 <div id="body">
      <p> </p>
 </div>

我希望当我单击“ tab1”时，它变为粗体并显示与其对应的文本。 当我单击“ tab2”时，它会变为粗体，而其他人则不会。 等等

所以这是我做的：

  document.getElementById("tab1").onclick = function () { document.querySelector("span").classList.remove('active'); document.getElementById("tab1").classList.add('active'); document.getElementById("body").innerHTML = "hello";} document.getElementById("tab2").onclick = function () { document.querySelector("span").classList.remove('active'); document.getElementById("tab2").classList.add('active'); document.getElementById("body").innerHTML = "hello2";} document.getElementById("tab3").onclick = function () { document.querySelector("span").classList.remove('active'); document.getElementById("tab3").classList.add('active'); document.getElementById("body").innerHTML = "hello3";} 

我添加的CSS：

    .active {
        font-weight: 700;
    }

Answer 1

querySelector仅返回一个元素。 您需要querySelectorAll 。 然后，您需要遍历结果以从所有匹配的元素中删除该类：

document.querySelectorAll("span").forEach(e => e.classList.remove('active'));

 document.getElementById("tab1").onclick = function() { document.querySelectorAll("span").forEach(e => e.classList.remove('active')); this.classList.add('active'); document.getElementById("body").innerHTML = "hello"; } document.getElementById("tab2").onclick = function() { document.querySelectorAll("span").forEach(e => e.classList.remove('active')); this.classList.add('active'); document.getElementById("body").innerHTML = "hello2"; } document.getElementById("tab3").onclick = function() { document.querySelectorAll("span").forEach(e => e.classList.remove('active')); this.classList.add('active'); document.getElementById("body").innerHTML = "hello3"; } 

 .active { font-weight: 700; } 

 <div class="nav"> <span id="tab1">tab1</span>| <span id="tab2">tab2</span>| <span id="tab3">tab3 </span> <div id="body"> <p> </p> </div> 

Answer 2

如果您只有3个标签，或者标签数量不多，则可以使用此脚本对它们进行硬编码。 但是，如果您有许多选项卡，则可以使用建议的解决方案j08691。

document.getElementById("tab1").onclick = function () 
{
    document.getElementById("tab1").classList.add('active'); 
    document.getElementById("tab2").classList.remove('active');
    document.getElementById("tab3").classList.remove('active');
    document.getElementById("body").innerHTML =  "hello";
}

document.getElementById("tab2").onclick = function () 
{
    document.querySelector("span").classList.remove('active');
    document.getElementById("tab1").classList.remove('active');
    document.getElementById("tab2").classList.add('active'); 
    document.getElementById("tab3").classList.remove('active');
    document.getElementById("body").innerHTML =  "hello2";
}


document.getElementById("tab3").onclick = function () 
{
    document.querySelector("span").classList.remove('active');
    document.getElementById("tab1").classList.remove('active');
    document.getElementById("tab2").classList.remove('active');
    document.getElementById("tab3").classList.add('active'); 
    document.getElementById("body").innerHTML =  "hello3";
}

希望对您有帮助...干杯!!!