Ваш код не даст никаких результатов, которые вы ищете, однако, очевидно, что вы ищете.
Ваши кнопки должны выглядеть следующим образом:
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
Здесь роль предотвращает поведение отправки по умолчанию.Onclick сообщает кнопке, что делать, когда вы нажимаете на нее, и «BraveDiv» - это параметр, который мы передадим функции, сообщая ей, какой div отображать.
DIV, связанный с вышеуказанной кнопкой, долженвыглядит следующим образом:
<div id="BraveDiv" style="display: none;"> SOME CONTENT HERE </div>
Здесь вы заметите, что идентификатор равен параметру, который мы упомянули выше.
И ваш JavaScript должен работать следующим образом:
<script>
function showDiv(elem){
document.getElementById(elem).style.display = "block";
}
</script>
Я прикрепил рабочий пример, как показано ниже, просто нажмите «Выполнить фрагмент кода», чтобы просмотреть фрагмент и проверить код.
function showDiv(elem) {
document.getElementById(elem).style.display = "block";
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>
Выше, однако, только покажут ваши DIVS.
Полное решение jQuery для этого (скрыть / показать согласно тегу)будет выглядеть следующим образом:
<script>
function showDiv(elem) { // When the button is pressed
$("div").each(function() { // For each Div
if ($(this).attr('id') != elem) { // If the Div's id is not equal to the parameter
$(this).css("display", "none");
} // HIDE IT
else {
$(this).css("display", "block"); // SHow It
});
</script>
Если вы не знакомы с jQuery и предпочитаете решение только на JavaScript, то:
<script>
function showDiv(elem){
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for(let i = 0; i < divsToCheck.length; i++){
if(divsToCheck[i] == elem){
document.getElementById(divsToCheck[i]).style.display = "block";
}
else{
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
</script>
Снова я прикрепил фрагмент ниже.
function showDiv(elem) {
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
document.getElementById(divsToCheck[i]).style.display = "block";
} else {
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>