Подскажите, есть к примеру nav
и 5 контейнеров. Как сделать, чтобы при нажатии на любую ссылку в меню один контейнер убирался, по принципу display none
, а другой появлялся, на который нажал юзер. То есть, получается навигация статичная, а контейнеры — динамичные.
ну можно как то так
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.clear{
display: none;
font-size: 40px;
color: tomato;
}
.show{
display: block;
}
</style>
<body>
<nav>
<button onclick="goTo(this, 'first')">1 Cnt</button>
<button onclick="goTo(this, 'second')">2 Cnt</button>
<button onclick="goTo(this, 'third')">3 Cnt</button>
<button onclick="goTo(this, 'fourth')">4 Cnt</button>
<button onclick="goTo(this, 'fifth')">5 Cnt</button>
</nav>
<div id="first" class="clear show">1</div>
<div id="second" class="clear">2</div>
<div id="third" class="clear">3</div>
<div id="fourth" class="clear">4</div>
<div id="fifth" class="clear">5</div>
<script src="./src.js"></script>
</body>
</html>
javascript
function goTo(t, id) {
const clears = document.getElementsByClassName('clear');
Array.from(clears).forEach(element => {
element.classList.remove('show');
});
document.getElementById(id).classList.add('show');
}
Ну по томуже принципу
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.clear{
display: none;
font-size: 40px;
color: tomato;
}
.show{
display: block;
}
.active{
background: blue;
}
</style>
<body>
<nav>
<button onclick="goTo(this, 'first')" class="route_btn active">1 Cnt</button>
<button onclick="goTo(this, 'second')" class="route_btn">2 Cnt</button>
<button onclick="goTo(this, 'third')" class="route_btn">3 Cnt</button>
<button onclick="goTo(this, 'fourth')" class="route_btn">4 Cnt</button>
<button onclick="goTo(this, 'fifth')" class="route_btn">5 Cnt</button>
</nav>
<div id="first" class="clear show">1</div>
<div id="second" class="clear">2</div>
<div id="third" class="clear">3</div>
<div id="fourth" class="clear">4</div>
<div id="fifth" class="clear">5</div>
<script src="./src.js"></script>
</body>
</html>
JS
function goTo(t, id) {
console.log(t.classList);
const clears = document.getElementsByClassName('clear');
const btns = document.getElementsByClassName('route_btn');
Array.from(clears).forEach(element => {
element.classList.remove('show');
});
Array.from(btns).forEach(element => {
element.classList.remove('active');
});
t.classList.add('active');
document.getElementById(id).classList.add('show');
}
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Сталкивался ли кто с такой задачей - нужно скрестить такой вот input https://codepenio/rcauquil/pen/adBGdR с jquery validate() хотя бы примерно, как?
Как добавить в POST запрос значение из data-num и результат вернуть в таблицу в место None?
Нужно чтобы по клику (в нашем случае) на букву "М" появлялось под-меню, а при повторном клике исчезало, реализовать это с помощью jquery было бы просто...