Как сделать активное меню с помощью JS?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

В чем ошибка в коде, хочу сделать активный пункт меню, чтобы он выделялся черным
HTML:

<nav class="main_menu">            <div class="link">                <a id="Main" href="#">Главная</a>                <a id="Delivery" href="#">Доставка</a>                <a id="Guarantee" href="#">Гарантия</a>                <a id="Catalog" href="#">Каталог</a>            </div>                </nav>

<nav class="main_menu"> <div class="link"> <a id="Main" href="#">Главная</a> <a id="Delivery" href="#">Доставка</a> <a id="Guarantee" href="#">Гарантия</a> <a id="Catalog" href="#">Каталог</a> </div> </nav>

CSS:

.link {     position: absolute;     left: 300px;     top: 78px; } .link a:hover {     border-top: 2px solid #377771; }  #Main, #Delivery, #Guarantee, #Catalog {     font-family: "Proza Libre", sans-serif;     font-weight: 400;     color: #377771;     text-decoration: none;     font-size: 24px;     margin-right: 45px; }   .menu {     position: relative;     width: 100%;     height: 110px; } .link a.active {     color: #000000; }

.link { position: absolute; left: 300px; top: 78px; } .link a:hover { border-top: 2px solid #377771; } #Main, #Delivery, #Guarantee, #Catalog { font-family: "Proza Libre", sans-serif; font-weight: 400; color: #377771; text-decoration: none; font-size: 24px; margin-right: 45px; } .menu { position: relative; width: 100%; height: 110px; } .link a.active { color: #000000; }

JS:

var menuLinks = document.querySelectorAll(".link a"); for (var i = 0; i < menuLinks.length; i++) {     menuLinks[i].addEventListener("click", function() {         for (var j = 0; j < menuLinks.length; j++) {             menuLinks[j].classList.remove("active");         }         this.classList.add("active");     }); }

var menuLinks = document.querySelectorAll(".link a"); for (var i = 0; i < menuLinks.length; i++) { menuLinks[i].addEventListener("click", function() { for (var j = 0; j < menuLinks.length; j++) { menuLinks[j].classList.remove("active"); } this.classList.add("active"); }); }

Дополнительно:

1. id для стилизации обычно не используют по нескольким причинам. В том числе, специфичность выше чем у классов.
2. Почему-то ссылкой вы называете див <div class="link">
Подумайте, как другие люди должны это понимать.

Меняем разметку:

&lt;nav class="main_menu"&gt;     &lt;ul class="links"&gt;         &lt;li&gt;&lt;a class="link" href="#"&gt;Главная&lt;/a&gt;&lt;/li&gt;         &lt;li&gt;&lt;a class="link" href="#"&gt;Доставка&lt;/a&gt;&lt;/li&gt;         &lt;li&gt;&lt;a class="link" href="#"&gt;Гарантия&lt;/a&gt;&lt;/li&gt;         &lt;li&gt;&lt;a class="link" href="#"&gt;Каталог&lt;/a&gt;&lt;/li&gt;     &lt;/ul&gt; &lt;/nav&gt;

&lt;nav class="main_menu"&gt; &lt;ul class="links"&gt; &lt;li&gt;&lt;a class="link" href="#"&gt;Главная&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="link" href="#"&gt;Доставка&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="link" href="#"&gt;Гарантия&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="link" href="#"&gt;Каталог&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt;

Меняем селектор с #Main, #Delivery, #Guarantee, #Catalog на .link
И .link a.active на .link-active.
В js класс .active на link-active

  • Да и перебор можно сделать без громоздкого for а через foreach, но это уже скорее вкусовщина

    • Ответы:

    У вас стили прописанные для айдишников #Main, #Delivery, #Guarantee, #Catalog перебивают по весу стили прописанные для классов. Почитать про это можно вот тут: Specificity.
    Замените всё на классы, и тогда будет работать.

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Роман IT Ответ

    Для создания активного меню с помощью JavaScript, вам необходимо добавить класс или стиль к выбранному пункту меню при нажатии на него, а затем удалить этот класс или стиль у всех остальных пунктов меню.

    Прежде всего, вам нужно создать HTML разметку для вашего меню. Например:

    <nav>
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

    <nav> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </nav>

    Затем, добавьте следующий JavaScript код для обработки кликов по пунктам меню:

    document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('nav ul li a');
 
  menuItems.forEach(item =&gt; {
    item.addEventListener('click', function() {
      menuItems.forEach(item =&gt; {
        item.classList.remove('active');
      });
 
      this.classList.add('active');
    });
  });
});

    document.addEventListener('DOMContentLoaded', function() { const menuItems = document.querySelectorAll('nav ul li a'); menuItems.forEach(item =&gt; { item.addEventListener('click', function() { menuItems.forEach(item =&gt; { item.classList.remove('active'); }); this.classList.add('active'); }); }); });

    Этот код добавляет обработчик события клика для каждого пункта меню. При клике на пункт меню, удаляется класс 'active' у всех пунктов и добавляется к тому, на который кликнули.

    Наконец, добавьте стили для класса 'active' в вашем CSS файле, чтобы выделить активный пункт меню:

    nav ul li a.active {
  color: blue;
}

    nav ul li a.active { color: blue; }

    Теперь ваше меню будет иметь активное состояние при клике на пункты. Не забудьте настроить стили и функциональность под ваши нужды!

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ code-review Нужен ли код-ревью React/TypeScript проекта? 1 ответ