Есть два дива в навигационном меню. Надо сделать так чтобы чтобы при нажатии на одну и ту же кнопку один див скрывался а второй появлялся. И в обратку. Это возможно?
-
1Конечно можно. Но при чем тут bootstrap? – Air 18 апр '18 в 19:45
1 ответ
Посмотрите в этот код я думаю суть будет понятён.
Если ищете легких решений как алтернатива можете использовать toggle
метод jQuery вот ссылка Jsfiddle
var divs = ["Div1", "Div2", "Div3", "Div4"];
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
div = document.getElementById(divId);
if(visibleDivId === divId) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
}
.buttons a {
font-size: 16px;
}
.buttons a:hover {
cursor:pointer;
font-size: 16px;
}
<div class="main_div">
<div class="buttons">
<a href="#" onclick="divVisibility('Div1');">Div1</a>
<a href="#" onclick="divVisibility('Div2');">Div2</a>
<a href="#" onclick="divVisibility('Div3');">Div3</a>
<a href="#" onclick="divVisibility('Div4');">Div4</a>
</div>
<div class="inner_div">
<div id="Div1">Я первый DİV</div>
<div id="Div2" style="display: none;">Я второй DİV</div>
<div id="Div3" style="display: none;">Я третий DİV</div>
<div id="Div4" style="display: none;">Я четвертый DİV</div>
</div>
</div>
-
У вас тут просто переключатель. А мне нужна одна кнопка которая один блок включит и одновременно выключит другой. – Артём Хмель 18 апр '18 в 12:18
-
-
-
-