Динамичные контейнеры

134
04 апреля 2019, 13:30

Подскажите, есть к примеру nav и 5 контейнеров. Как сделать, чтобы при нажатии на любую ссылку в меню один контейнер убирался, по принципу display none, а другой появлялся, на который нажал юзер. То есть, получается навигация статичная, а контейнеры — динамичные.

Answer 1

ну можно как то так

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');
}
READ ALSO
Как подружить jquery validate и анимированный input?

Как подружить jquery validate и анимированный input?

Сталкивался ли кто с такой задачей - нужно скрестить такой вот input https://codepenio/rcauquil/pen/adBGdR с jquery validate() хотя бы примерно, как?

210
Выборка элемента через jquery

Выборка элемента через jquery

Как добавить в POST запрос значение из data-num и результат вернуть в таблицу в место None?

278
По клику открыть меню

По клику открыть меню

Нужно чтобы по клику (в нашем случае) на букву "М" появлялось под-меню, а при повторном клике исчезало, реализовать это с помощью jquery было бы просто...

167
Не заходит в метод $.getJSON()

Не заходит в метод $.getJSON()

Просто создал новый проект на ASPNET Core 2

173