如何在同一 html 頁面上的 javascript 中顯示一個 div 並隱藏另一個 div

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 ......但是帶有 sehdule 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>