Я пытаюсь изменить стиль элемента списка при щелчке на черный фон с белым текстом. Когда я нажимаю другой, я хочу, чтобы он вернулся к базовому состоянию на белом фоне и черном тексте. Проблема, с которой я столкнулась, - это когда я нажимаю второй элемент списка, первый сохраняет стиль, сгенерированный в JS. Это не то, что я хочу.
Здесь HTML:
<ul class="menu">
<li>
<a href="#">Item One</a>
</li>
<li>
<a href="#">Item Two</a>
</li>
</ul>
И здесь JS
$('.menu > li > a').click(function(){
$(this).css({
'background-color': 'black',
'color': 'white'
});
$(this).siblings('.menu > li > a').css({
'background-color': 'white',
'color':'black'
});
});
Я знаю, что я, вероятно, просто нацелился не на что-то, и я пробовал несколько способов, но я не могу понять, как это понять. Я думаю, что у меня родились родители, дети и родственные братья. Любая помощь очень ценится!
Вот он на JSFiddle
Ваш селектор неверен. Попробуйте:
$(this).closest('li').siblings().find('> a').css({
'background-color': 'white',
'color': 'black'
});
или, скорее, цепей.
$(this).css({
'background-color': 'black',
'color': 'white'
}).closest('li').siblings().find('> a').css({
'background-color': 'white',
'color': 'black'
});
В вашем коде, когда вы делаете $(this).siblings('.menu > li > a')
где this
якорный тег, в классе.menu нет братьев и сестер. Вместо этого вы хотите перейти к братьям и сестрам своего родителя и сбросить метки привязки своих прямых потомков.
Когда вы устанавливаете стили в элементе, он имеет приоритет над свойством css, которое вы определили для зависания. SO переключитесь обратно в класс и попробуйте следующее:
CSS
.menu li > a.active{
background-color: #000;
color: #fff;
}
JS
$('.menu li > a').click(function(){
$(this).addClass('active').closest('li').siblings().find('> a.active').removeClass('active');
});
Или просто
$('.menu li > a').click(function(){
var $this = $(this);
$this.closest('.menu').find('a.active').not($this.addClass('active')).removeClass('active');
})
Это выполнит вашу задачу и также отменяет выбор (возврат к базовым цветам) строки, если он снова щелкнет после выбора.
JQuery:
$('.menu li > a').click(function() {
if($(this).hasClass('active') == true) {
$(this).removeClass('active');
}
else {
$('li > a.active').removeClass('active');
$(this).addClass('active');
}
});
CSS:
.menu li a {
background-color: #FFF;
color: #000;
}
.menu li a.active {
background-color: #000;
color: #FFF;
}
.menu li a:hover {
background-color: #000;
color: #FFF;
}
Cheers - Fiddle (sry я заимствовал часть скрипта @PSL)
$('.menu li a').click(function(){
$(this).css({
'background-color': 'black',
'color': 'white'
});
$(this).parent().siblings().find('a').css({
'background-color': 'white',
'color': 'black'
});
});
Попробуй это
$('.menu li > a').click(function(){
$('.menu li > a').css({
'background-color': 'white',
'color': 'black'
});
$(this).css({
'background-color': 'black',
'color': 'white'
});
});