Переключить активный класс в навигационной панели с JQuery
50253 просмотра
7 ответа
<ul>
<li id="tabHome" class="active"><a href="@Href("~")">Home</a></li>
<li id="tabCMDS" ><a href="@Href("~/CMDS")">CMDS</a></li>
<li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li>
<li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li>
</ul>
Поэтому я хотел привязать к click
каждому из этих идентификаторов и установить class="active"
тот, который был нажат, и удалить его из всех остальных.
Я могу сделать первую часть, но как я могу сделать последнюю?
Автор: slandau Источник Размещён: 12.11.2019 09:17Ответы (7)
33 плюса
$(function() {
$("li").click(function() {
// remove classes from all
$("li").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
});
});
Было бы разумно дать значимые классы, <li>
чтобы вы могли правильно выбрать только те, но вы поняли идею.
9 плюса
Нет необходимости связывать событие клика с каждым идентификатором, а вместо этого связывать все элементы списка этого неупорядоченного списка. Затем используйте методы .parent (). Children (). Следующее должно работать:
$('ul li').click(function(){
$(this).addClass('active');
$(this).parent().children('li').not(this).removeClass('active');
});
Автор: Marlin
Размещён: 23.06.2011 07:39
3 плюса
Вы, вероятно, найдете это лучше (в противном случае страница будет прыгать) -
$(function() {
$("li").click(function() {
// remove classes from all
$("li").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
// stop the page from jumping to the top
return false;
});
});
Автор: Phil Carr
Размещён: 03.09.2012 02:34
1 плюс
Ты можешь сделать:
$('li').click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).siblings().each(function(){
$(this).removeClass('active') ;
});
});
скрипка здесь http://jsfiddle.net/UVyKe/1/
Автор: Nicola Peluchetti Размещён: 23.06.2011 07:350 плюса
Дайте ul идентификатор или класс и выберите его.
<ul id = "nav">...
var $navItems = $('#nav > li');
$navItems.click(function(){
$navItems.removeClass('active');
$(this).addClass('active');
});
Автор: Stefan Kendall
Размещён: 23.06.2011 07:30
0 плюса
$("ul li").click(function()
{
$("ul .active").removeClass("active");
$(this).addClass("active");
});
Автор: Itai Sagi
Размещён: 23.06.2011 07:34
-1 плюса
Вы можете добавить активный класс, используя одну строку ниже, без каких-либо событий
$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
Автор: Manthan Vaghani
Размещён: 10.02.2018 11:09
Вопросы из категории :
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- jquery Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью jQuery?
- jquery Получение идентификатора элемента, который вызвал событие
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- html Как вы можете настроить номера в упорядоченном списке?
- css Создание закругленных углов с помощью CSS
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?