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";}

而且我补充说：

    .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";
}

希望它有所帮助......干杯！