Question

我有一个html页面，其中所有导航（让我们说TABS）都驻留在其中。

我写了一个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并显示带有计划ID的Div ......但是带有scehdule ID的DIV显示在所有选项卡中..

我希望现在可能有些不可靠

Answer 1

要隐藏所有标签而不选择所选标签，您可以使用此功能：

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>

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

1 个答案: