如何在同一html页面的javascript中显示一个div和隐藏另一个div

我有一个html页面，其中包含所有导航（让我们说它们是选项卡）

我编写了一个javascript来显示一个链接，并在单击链接时隐藏另一个链接

它在我想要的选项卡上运行良好，但当我导航到另一个选项卡时，div显示在底部。我不希望它显示在所有其他选项卡中

这是我的javascript代码：

function displayBlock(divName){
    if(document.getElementById("vend")) {
        var oldDiv = document.getElementById("vend");
        oldDiv.style.display = 'none';
        //show div
        var newDiv = document.getElementById(divName);
        newDiv.style.display = 'block';

    }
    else{
        var newDiv = document.getElementById(divName);
        newDiv.style.display = 'none';
    }
}

如何修改它以满足需要

HTML结构：

<div class="tab-content">
  <div class="tab-pane" id="dashboard">
     <div class="container">
         <!-- Container code -->
     </div>
  </div>
  <div class="tab-pane" id="vend">
     <div class="container">
         <!-- Container code -->
          <a id="auto-topup2" href="dashboard#auto-topup" onclick="displayBlock('schedule');">
               Schedule Autovend                          
          </a>
     </div>
  </div>
  <div class="tab-pane" id="commision">
     <div class="container">
         <!-- Container code -->
     </div>
  </div>
  <div id="schedule" style="display:none">
      <div class="tab-pane" id="auto-topup">
        <div class="container">
           <!-- Container code -->
        </div>
     </div>
 </div>

在vend部分中，我创建了一个函数，它的onclick将调用函数并隐藏带有vend id的Div和带有schedule id的show Div……但是带有scehdule id的Div将显示在所有选项卡中

---

我希望现在隐藏所有选项卡而不隐藏所选选项卡会有点不可靠。您可以使用此功能：

function displayBlock(idOfBlock) {
    document.getElementByClass('block').style.display = 'none';
    document.getElementById(idOfBlock).style.display = 'block'
}

<div class="block" id="hello">
    hello
</div>
<div class="block" id="foobar">
    foobar
</div>

功能显示块（idOfBlock）{
document.getElementByClass（'block'）.style.display='none'；
document.getElementById（idOfBlock）.style.display='block'
}
你好
福巴

更好地使用类。将所有tabContent设置为同一类，例如content。当需要显示特殊内容时，隐藏类中的所有元素，只显示所选元素。为什么要将选择器

document.getElementById（“vend”）

放在if语句中？没有条件满足？我只是试了一下…我知道它没有任何价值。你能把你的代码放在小提琴里让我们看一下吗？你应该在JSFIDLE或stack SNIPTE上创建一个代码段，以显示你想要实现的目标，并告诉我们为什么在你当前的代码中，代码没有按照你的预期运行，很难猜出你期望的结果是什么。这会不会在几秒钟内隐藏你想要的标签呢？我想你可以从

idOfBlock

中删除类，然后再添加它，但我不喜欢那样的解决方案，尽管它会，但用户不会识别它。这是最小的解决方案。如果你不想隐藏它，你可以把它安全地保存在一个全局变量中，但我不喜欢这种方式。