Изменить стиль списка при помощи JavaScript

Question

Изменить стиль списка при помощи JavaScript

0

Я пытаюсь изменить стиль элемента списка при щелчке на черный фон с белым текстом. Когда я нажимаю другой, я хочу, чтобы он вернулся к базовому состоянию на белом фоне и черном тексте. Проблема, с которой я столкнулась, - это когда я нажимаю второй элемент списка, первый сохраняет стиль, сгенерированный в 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

Dann 18 сен. 2013, в 03:55

Источник

Теги:

javascript

jquery

html

css

4 ответа

1

Это выполнит вашу задачу и также отменяет выбор (возврат к базовым цветам) строки, если он снова щелкнет после выбора.

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)

Deryck 18 сен. 2013, в 00:09

1

+1. Извините, я не видел вашего ответа, когда разместил свой комментарий под вопросом.
nnnnnn 18 сен. 2013, в 02:32
0

ха-ха, все хорошо, спасибо
Deryck 18 сен. 2013, в 02:52

0

См. Этот рабочий jsFiddle

$('.menu li a').click(function(){
    $(this).css({
        'background-color': 'black', 
        'color': 'white'
    });
    $(this).parent().siblings().find('a').css({
        'background-color': 'white', 
        'color': 'black'
    });
});

chopper 17 сен. 2013, в 22:47

0

Попробуй это

$('.menu li > a').click(function(){  
    $('.menu li > a').css({
        'background-color': 'white', 
        'color': 'black'
    });
      $(this).css({
        'background-color': 'black', 
        'color': 'white'
    });
});

ssilas777 17 сен. 2013, в 22:19

Ещё вопросы

+1. Извините, я не видел вашего ответа, когда разместил свой комментарий под вопросом.

PSL · Accepted Answer · 2013-09-17T23-33-00.000Z

Ваш селектор неверен. Попробуйте:

$(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');
})

скрипка

Круто, это прекрасно, но в итоге это ломает: hover после того, как я выбрал один из элементов списка. Какие-либо предложения? : D Еще раз спасибо! Ты рок, рок.
@duhduhdan Да, это прерывает зависание, потому что вместо этого вы устанавливаете стиль для elemnt, если вы используете классы, это может быть обработано. Я обновлю решение для вас.
Большой! Большое спасибо: D большое спасибо.