0

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

5
  • то есть навигация по страницам без перезагрузки страницы что ли как бы
    – Саске
    8 ноя 2018 в 13:08
  • @Санитариум да. 8 ноя 2018 в 13:11
  • а вообще можно использовать angular.js весит очень мало(30 кб) и там хорошо реализован данный функционал и не только.
    – Саске
    8 ноя 2018 в 13:27
  • версию 2 и выше не смотри там зависимостей много из коробки
    – Саске
    8 ноя 2018 в 13:27
  • обновил коммент
    – Саске
    8 ноя 2018 в 13:36

1 ответ 1

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');
}
1
  • а как еще можно сделать чтобы вместе с активным контейнером была активна и кнопка в nav? 8 ноя 2018 в 13:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.