Активный раздел в меню

228
12 декабря 2016, 10:06

Как можно на jQuery сделать, чтобы по переходу по ссылке к ней добавлялся класс active, а с предыдущей убирался? Чтобы в меню видеть, какой раздел сейчас открыт

Answer 1

(function(){ 
	$('#menu li a').click(function () { 
        $('#menu li').removeClass('active'); 
        $(this).parent().addClass('active'); 
        return true; 
    }); 
}) ();
#menu li.active a{ 
	color: #FFC002; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<ul id="menu"> 
	<li class="active"><a href="#">Пункт</a> 
	<li><a href="#">Пункт</a> 
    <li><a href="#">Пункт</a>     
    <li><a href="#">Пункт</a>    
</ul>

Answer 2

Вообще добавление и удаление классов CSS в jQuery осуществляется с помощью методов addClass() и removeClass().

Например:

$("button").click(function(){
    $("#div1").addClass("important blue");
});
$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});

Однако в вашем случае, возможно, jQuery вообще не понадобится, потому что при переходе по ссылке вы (предположительно) загружаете новую страницу в текущее окно браузера, что делает манипуляции с элементами старой бессмысленными.

Если же у вас это не переход по ссылке, а просто смена состояния страницы, то используйте addClass и removeClass как в моём примере выше.

Подробнее о addClass и removeClass:

  • https://api.jquery.com/addClass/ (англ.)
  • https://api.jquery.com/removeClass/ (англ.)
Answer 3

Через кукисы допустимо? При клике на пункт меню в переменную записывается ее номер, при загрузки страницы проверяется переменная и нужному элементу присваивается класс active.

READ ALSO
Связка Web-камеры и Web-страницы Full Resolution

Связка Web-камеры и Web-страницы Full Resolution

Есть страница, на которой находится пользовательМне нужно получить изображение с Web-камеры с максимальным разрешением

315
Список через toggleClass

Список через toggleClass

При нажатии на один из пунктов списка через toggleClass добавляю overflow: visible, и соответственно появляется списокНо проблема, как видно по скрину,...

254
Как это реализовать на JS?

Как это реализовать на JS?

Задача такая - мне нужно отображать "/ne/sponsors", когда пользователь находиться на странице "/ne/browse-pages"Не делая при этом настоящий редирект, просто...

231