Как показать один div и скрыть другой div в javascript на той же странице html

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> 

В разделе венд я создал чьи OnClick будет вызывать функцию и скрыть Div с венд ид и показать Div с графиком ID .... Но DIV с scehdule ID показывает во всех закладках ..

Я надеюсь, что теперь он может быть несколько undestandable

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>