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

Question

[dismalchange]

В чем ошибка в коде, хочу сделать активный пункт меню, чтобы он выделялся черным
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>

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;
}

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");
    });
}

Comments

[Ankhena]

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

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

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

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

[imko]

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

Answer 1

[Леонид Князев]

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