как я могу показать один DIV и скрыть все остальные

Question

Я пытаюсь добавить петлю к этому сценарию, чтобы скрыть все другие DIV после я нажать на одну из них:

function showHideDiv(id) { 
 

 
    var obj = document.getElementById(id); 
 

 
    if (obj.style.display == "none") { 
 
    obj.style.display = 'block'; 
 

 
    } else if (obj.style.display == "block") { 
 
    obj.style.display = 'none'; 
 
    } 
 
}

<li style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="#guitars" onclick="showHideDiv('guitars')">Guitars</a> 
 
</li> 
 
<li style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="#basses" onclick="showHideDiv('basses')">Basses</a> 
 
</li> 
 
<li style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="#gallary" onclick="showHideDiv('gallary')">GALLLARY</a> 
 
</li> 
 

 

 

 

 
<div id="guitars" class="guitars" style="display: none;" class="mCustomScrollbar" data-mcs-theme="dark"> 
 
    <h2>Our Guiters</h2> 
 
</div> 
 
<div id="guitars" class="guitars" style="display: none;" class="mCustomScrollbar" data-mcs-theme="dark"> 
 
    <h2>Our Basses</h2> 
 
</div>

Answer 1

Если я правильно понял ваш вопрос, следующий код может вам помочь.

$(document).ready(function() { 
 
var d = $('#parent > div').length; 
 
$('#parent > div').click(function (e) 
 
{ 
 
    
 
    var s = $('#parent > div').length -1; 
 
    var z = $('div').index(this); 
 
    for(i=0;i<=(s);i++){ 
 
    var y = z-1; 
 
    if(i != y){ 
 
    $('#parent > div').eq(i).css('display','none'); 
 
     console.log('Index '+i+'has been hidden'); 
 
     } 
 
     
 
    } 
 
    
 
}); 
 

 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id = "parent"> 
 
    <div>Guitars Basses GALLLARY</div> 
 
    <div>Our Guiters</div> 
 
    <div>Our Basses</div> 
 
</div>

Answer 2

вы можете сделать что-то вроде этого:

var divs = document.getElementsByTagName("div"); 
for(var i = 0; i < divs.length; i++){ 
    //do something to each div like 
    if (divs[i].style.display=="none"){ 
     divs[i].style.display='block'; 
    } else if(divs[i].style.display=="block"){ 
      divs[i].style.display='none'; 
    } 
} 

, если вы не хотите, чтобы выбрать все дивы можно присвоить класс дивы вы хотите, и использовать метод:

document.getElementsByClassName('assignedclass')