Как установить меню на активную ссылку фона

Question

Я хочу установить активный фон ссылки на какой-либо цвет даже при перемещении по URL-адресу. Я пробовал это, но он меняет фон, но в то время как он перемещается по щелкнутому URL-адресу, все настройки по умолчанию.

Я пытаюсь добавить active класс для кликов меню с помощью JQuery. Код такой.

HTML

<ul> 
     <li class="menu-item"><a href="#">HOME</a></li> 
     <li class="menu-item"><a href="#">COMPANY PROFILE</a></li> 
     <li class="menu-item"><a href="#">PRODUCTS</a></li> 
     <li class="menu-item"><a href="#">CONTACT US</a></li> 
     <li class="menu-item"><a href="#">ENQUIRY</a></li> 
</ul> 

CSS

.menu-item a{ 
text-decoration: none; 
color: #FFF; 
font-weight: bold; 
padding: 7px 15px; 
line-height: 43px; 
font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif; 
font-size: 13px; 
letter-spacing: 1px; 
text-shadow: 2px 2px #555; 
} 
.menu-item a:hover{ 
background: #871304; 
opacity: 0.8; 
border-radius: 20px; 
} 
.menu-item .active{ 
background-color:#FFF; 
color:black; 
border-radius: 20px; 
} 

Jquery

$(".menu-item a").click(function(){ 
    $(".menu-item a").addClass('active').siblings().removeClass('active'); 
    }); 

Пожалуйста, дайте мне знать, что там, где я MAK ошибка?

Answer 1

Ваш код хорошо, кроме вашего JQuery. Вы хотите удалить класс active, примененный к любому элементу menu-item a, прежде чем применять active к новому элементу. Проверьте часть JQuery ниже:

$(function() { 
 
    $(".menu-item a").click(function() { 
 
    $(".menu-item a").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    }); 
 
});

.menu-item a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
    font-weight: bold; 
 
    padding: 7px 15px; 
 
    line-height: 43px; 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    font-size: 13px; 
 
    letter-spacing: 1px; 
 
    text-shadow: 2px 2px #555; 
 
} 
 
.menu-item a:hover { 
 
    background: #871304; 
 
    opacity: 0.8; 
 
    border-radius: 20px; 
 
} 
 
.menu-item .active { 
 
    background-color: #871304; 
 
    color: black; 
 
    border-radius: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="menu-item"><a href="#">HOME</a> 
 
    </li> 
 
    <li class="menu-item"><a href="#">COMPANY PROFILE</a> 
 
    </li> 
 
    <li class="menu-item"><a href="#">PRODUCTS</a> 
 
    </li> 
 
    <li class="menu-item"><a href="#">CONTACT US</a> 
 
    </li> 
 
    <li class="menu-item"><a href="#">ENQUIRY</a> 
 
    </li> 
 
</ul>

Answer 2

Если вы на самом деле собираетесь ссылаться на разные страницы, вам нужно выделить пункт меню для страницы, на которой вы находитесь. Но похоже, что вы, вероятно, строите одностраничный сайт, используя jQuery DOM.

Если вы хотите, чтобы это работало на одной странице, вам нужно изменить свой JS-код. То, что вы сейчас в основном говорит это:

• Когда пункт меню щелкнул ...
• Выберите все пункты меню
• Добавить класс «активный» им
• Выберите все братья и сестры для каждый пункт меню (который фактически ничего не делает)
• Удалить класс «активный» из них

Так что это явно не то, что вы хотите. Для того, чтобы работать только на деталь, которая была нажата, используйте селектор $(this), например, так:

$(".menu-item a").click(function(){ // When a menu item is clicked 
    $(".menu-item a").removeClass('active'); // Select all menu items and remove active class 
    $(this).addClass('active');    // Add active class to THIS menu item (that was clicked) 
});