Этот вопрос закрыт для ответов, так как повторяет вопрос Как при клике на элемент добавить ему класс, а у всех соседей удалить?
@Whylian

Добавить класс active к активному пункту и убрать у уже не активного пункта меню?

Добрый день. нужно сделать из 9 пунктов 1 активный и при нажатии на другой пункт меню, чтобы менялся класс актив ( там убирался а тут добавлялся соотвественно). а так же если это возможно ( это точно как-то возможно, но я новичек) Чтобы при нажатии на другой пункт меню один див скрывался, а второй появлялся

<main class="container-fluid"> 
<div class="container2">
    <div class="block1 d-flex">
        <nav class="menu conti">
            <a class="active" href="#part1" onclick="onclickbut()">День 1. Варшава</a>
            <a class='active' href="#" data-toggle="2">День 2. Первый день в Испании</a>
            <a href="#">День 3. Барселона</a>
            <a href="#">День 4. Море</a>
            <a href="#">День 5. Море</a>
            <a href="#">День 6. Барселона</a>
            <a href="#">День 7. Салоу</a>
            <a href="#">День 8. Пора уезжать</a>
            <a href="#">День 9. Закупы, дорога домой</a>

        </nav>
        <div class="items">
            <div class="boxes1">
                <div class="box">
                    <figure>
                        <img src="../images/warkiss2.jpg" alt="Поцелуй" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;" >
                        <Figcaption>
                            <p>Поцелуйчик</p>
                        </Figcaption>
                    </figure>
                </div>
                <div class="box">
                    <figure>
                        <img src="../images/warsmile.jpg" alt="Улыбка" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                        <Figcaption>
                            <p>Улыбка</p>
                        </Figcaption>
                    </figure>
                </div>
                <div class="box">
                    <figure>
                        <img src="../images/wartoge1.jpg" alt="Вместе" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                        <Figcaption>
                            <p>Совместная фотокарточка</p>
                        </Figcaption>
                    </figure>
                </div>
                <div class="box">
                    <figure>
                        <img src="../images/warfontt22.jpg" alt="Фонтан" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                        <Figcaption>
                            <p>Дворец. Фонтан</p>
                        </Figcaption>
                    </figure>
                </div>
                <div class="box">
                    <figure>
                        <img src="../images/warglob.jpg" alt="Глобус" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                        <Figcaption>
                            <p>Глобус Холл</p>
                        </Figcaption>
                    </figure>
                </div>
                <div class="box">
                    <figure>
                        <img src="../images/warpainters.jpg" alt="Рисунки" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                        <Figcaption>
                            <p>Детские рисунки</p>
                        </Figcaption>
                    </figure>
                </div>
                <div class="box">
                    <figure>
                        <img src="../images/warnail.jpg" alt="Ногти" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                        <Figcaption>
                            <p>Ноготочки</p>
                        </Figcaption>
                    </figure>
                </div>
                <div class="box">
                    <figure>
                        <img src="../images/warband.jpg" alt="Группа Мадагаскар" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                        <Figcaption>
                            <p>Группа "Мадагаскар"</p>
                        </Figcaption>
                    </figure>
                </div>
                <div class="box">
                    <figure>
                        <img src="../images/warsho.jpg" alt="Барбершоп" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                        <Figcaption>
                            <p>Варшавский Барбершоп</p>
                        </Figcaption>
                    </figure>
                </div>
                </div>
                <div class="boxes2">
                    <div class="box">
                        <figure>
                            <img src="../images/day1a.jpg" alt="Поцелуй" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;" >
                            <Figcaption>
                                <p>Поцелуйчик</p>
                            </Figcaption>
                        </figure>
                    </div>
                    <div class="box">
                        <figure>
                            <img src="../images/day1b.jpg" alt="Vlad" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                            <Figcaption>
                                <p>Фото Влад</p>
                            </Figcaption>
                        </figure>
                    </div>
                    <div class="box">
                        <figure>
                            <img src="../images/day1c.jpg" alt="Вместе" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                            <Figcaption>
                                <p>Совместная фотокарточка</p>
                            </Figcaption>
                        </figure>
                    </div>
                    <div class="box">
                        <figure>
                            <img src="../images/day1d.jpg" alt="Фонтан" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                            <Figcaption>
                                <p>Дворец. Фонтан</p>
                            </Figcaption>
                        </figure>
                    </div>
                    <div class="box">
                        <figure>
                            <img src="../images/day1e.jpg" alt="Глобус" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                            <Figcaption>
                                <p>Глобус Холл</p>
                            </Figcaption>
                        </figure>
                    </div>
                    <div class="box">
                        <figure>
                            <img src="../images/day1f.jpg" alt="Группа Мадагаскар" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                            <Figcaption>
                                <p>Мадагаскар</p>
                            </Figcaption>
                        </figure>
                    </div>
                    <div class="box">
                        <figure>
                            <img src="../images/day1g.jpg" alt="Ногти" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;">
                            <Figcaption>
                                <p>Ноготочки</p>
                            </Figcaption>
                        </figure>
  • Вопрос задан
  • 75 просмотров
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы