Скрыть 4 divs; поменять местами отдельно по клику

Question

У меня есть 4 скрытых div на моей странице с «кнопкой div» в верхней части страницы, поэтому, когда я нажимаю кнопку div1, отображается скрытый div1. Затем, когда я нажимаю кнопку div2, отображаются div1 шкурки и div2.

Я знаю, что вы можете сделать:

function showDiv() { 
    document.getElementById('Div1').style.display = "block"; 
} 

<div id="Div1" style="display:none;">INFO</div> 
<input type="button" name="div1" value="Show Div" onclick="showDiv()" /> 

Но это будет только сделать DIV появится и будет оставаться там при нажатии на кнопку div2. Как я могу заставить их изменять, когда нажаты разные кнопки?

Answer 1

Вы можете скрыть другие дивы от не указав .style.dispay = «нет»

function showDiv() { 
    document.getElementById('Div1').style.display = "block"; 
    document.getElementById('Div2').style.display = "none"; 
    document.getElementById('Div3').style.display = "none"; 
    //etc... 
} 

Answer 2

вам нужно использовать только Javascript делать? Использование jQuery вы можете изменить его на:

<div id="Div1" class="myDiv" style="display:none;">INFO</div> 
<input type="button" class="divButton" name="div1" value="Show Div"/> 

А затем создать простую функцию, что-то вроде:

$('.divButton').on('click', function(event) { 
    $('.myDiv').hide(); 
    var myDiv = $(event.currentTarget).closest('myDiv'); 
    myDiv.show(); 
}); 

Answer 3

Передайте идентификатор div показать на кнопку мыши, и скрыть все другие:

function showDiv(id) { 
 
    var d= document.querySelectorAll('div'); 
 
    [].forEach.call(d, function(div) { 
 
    div.classList.add('hidden'); 
 
    }); 
 
    document.getElementById(id).classList.remove('hidden'); 
 
}

.hidden { 
 
    display: none; 
 
}

<div id="Div1" class="hidden">Div 1</div> 
 
<div id="Div2" class="hidden">Div 2</div> 
 
<div id="Div3" class="hidden">Div 3</div> 
 
<div id="Div4" class="hidden">Div 4</div> 
 

 
<input type="button" value="Show Div 1" onclick="showDiv('Div1')" /> 
 
<input type="button" value="Show Div 2" onclick="showDiv('Div2')" /> 
 
<input type="button" value="Show Div 3" onclick="showDiv('Div3')" /> 
 
<input type="button" value="Show Div 4" onclick="showDiv('Div4')" />