Как добавить класс "active" к активному элементу меню и удалить его у неактивного? 

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

        &lt;/nav&gt;
        &lt;div class="items"&gt;
            &lt;div class="boxes1"&gt;
                &lt;div class="box"&gt;
                    &lt;figure&gt;
                        &lt;img src="../images/warkiss2.jpg" alt="Поцелуй" style="border-radius: 40px; border: 5px #ccc solid; box-shadow: 0 0 10px #444;" &gt;
                        &lt;Figcaption&gt;
                            &lt;p&gt;Поцелуйчик&lt;/p&gt;
                        &lt;/Figcaption&gt;
                    &lt;/figure&gt;
                &lt;/div&gt;
                &lt;div class="box"&gt;
                    &l
  • 11 сентября 2024 г. 12:03
Ответы на вопрос 1 
Добрый день! 

Чтобы реализовать переключение класса "active" для элементов меню и одновременно управлять видимостью блоков, можно использовать JavaScript. В вашем случае мы можем создать функцию, которая будет обрабатывать клик по пунктам меню. При этом нужно удалять класс "active" у всех пунктов меню и добавлять его только к активному элементу. Также мы будем скрывать все блоки и отображать только тот, который соответствует текущему активному пункту меню.

Вот пример реализации:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Меню с активным элементом</title>
    <style>
        .active {
            font-weight: bold;
            color: red;
        }

        .item {
            display: none;
        }

        .item.active {
            display: block;
        }
    </style>
</head>
<body>
    <main class="container-fluid">
        <div class="container2">
            <div class="block1 d-flex">
                <nav class="menu conti">
                    <a href="#" class="active" onclick="switchMenu(event, 'part1')">День 1. Варшава</a>
                    <a href="#" onclick="switchMenu(event, 'part2')">День 2. Первый день в Испании</a>
                    <a href="#" onclick="switchMenu(event, 'part3')">День 3. Барселона</a>
                    <a href="#" onclick="switchMenu(event, 'part4')">День 4. Море</a>
                    <a href="#" onclick="switchMenu(event, 'part5')">День 5. Море</a>
                    <a href="#" onclick="switchMenu(event, 'part6')">День 6. Барселона</a>
                    <a href="#" onclick="switchMenu(event, 'part7')">День 7. Салоу</a>
                    <a href="#" onclick="switchMenu(event, 'part8')">День 8. Пора уезжать</a>
                    <a href="#" onclick="switchMenu(event, 'part9')">День 9. Закупы, дорога домой</a>
                </nav>
                <div class="items">
                    <div id="part1" class="item active">Содержимое для День 1. Варшава</div>
                    <div id="part2" class="item">Содержимое для День 2. Первый день в Испании</div>
                    <div id="part3" class="item">Содержимое для День 3. Барселона</div>
                    <div id="part4" class="item">Содержимое для День 4. Море</div>
                    <div id="part5" class="item">Содержимое для День 5. Море</div>
                    <div id="part6" class="item">Содержимое для День 6. Барселона</div>
                    <div id="part7" class="item">Содержимое для День 7. Салоу</div>
                    <div id="part8" class="item">Содержимое для День 8. Пора уезжать</div>
                    <div id="part9" class="item">Содержимое для День 9. Закупы, дорога домой</div>
                </div>
            </div>
        </div>
    </main>
    
    <script>
        function switchMenu(event, partId) {
            // Убираем класс active у всех ссылок
            const menuLinks = document.querySelectorAll('.menu a');
            menuLinks.forEach(link => {
                link.classList.remove('active');
            });

            // Добавляем класс active к текущей ссылке
            event.currentTarget.classList.add('active');

            // Скрываем все блоки
            const items = document.querySelectorAll('.items .item');
            items.forEach(item => {
                item.classList.remove('active');
            });

            // Показываем нужный блок
            const activeItem = document.getElementById(partId);
            activeItem.classList.add('active');
        }
    </script>
</body>
</html>
```

### Объяснение кода:
1. **HTML**: Создается навигационное меню с пунктами, каждый из которых вызывает функцию `switchMenu` с идентификатором соответствующего блока.
2. **CSS**: Класс "active" стилизуется для выделения активного элемента меню, блоки
Похожие вопросы
    Показать ещё