JQuery парение и функция щелчка

Question

У меня есть 4 ссылки, которые меняют положение 4 делений внутри веб-страницы.Я использую следующий скрипт jQuery для изменения цвета ссылок при наведении на них курсора.

    $('a.menua').hover(function(){
    $(this).css({'color':'#2EC7C7'});
},
function(){
    $(this).css({'color':'white'});
});

как я могу изменить этот скрипт, чтобы при нажатии на ссылку он не зависел и не изменил цветкогда я снимаю с нее мышь?

$('a.menua').click(function(){
     //content
});

Answer 1

Я бы использовал CSS для всех стилей, например:

a.menua { color: white; }
a.menua:hover, a.menua.clicked { color: #2EC7C7; }

Тогда используйте только jQuery, просто переключите этот класс с помощью .toggleClass() следующим образом:

$('a.menua').click(function(){
   $(this).toggleClass('clicked');
});

Или, если вы хотите, чтобы только один активный за раз:

$('a.menua').click(function(){
   $('a.menua').removeClass('clicked');
   $(this).addClass('clicked');
});

Это делает ваш код проще, легче и проще в обслуживании.Также он хранит информацию о вашем стиле, где (если это возможно), в CSS.

Answer 2

Единственная часть, которая должна требовать JS, это чтобы ссылка оставалась неизменной после того, как вы убрали с нее мышь. Один только CSS позволит вам контролировать, какой у него цвет, когда вы зависаете (с помощью a:hover) и во время щелчка мыши (с помощью a:active).

Предложение Крэйвера добавить класс с jQuery должно позаботиться о сохранении цвета после того, как вы уйдете, и, как он сказал, приятно сохранить информацию о стиле в вашем CSS.

Если вы используете все четыре возможных стиля ссылок, убедитесь, что вы разместили их в следующем порядке:

a:link { }
a:visited { }
a:hover { }
a:active { }

Вы можете запомнить это с помощью LoVe HAte - Link, Visited, Hover, Active.

Еще одна мысль - вы пытаетесь сделать цвет ссылки идентичным при наведении курсора и нажатии. Я предположил бы, что может быть лучше позволить им быть немного другими. Изменение цвета во время щелчка дает пользователю визуальную информацию о том, что он попал в цель.

Answer 3

Я думаю, вы хотите это: живой раствор

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

Обновление:

Эффект зависания теперь также основан на CSS (для этого и предназначен псевдокласс: hover). Таким образом, вы используете только jQuery для установки «активного» состояния ссылки.

HTML:

<a class="menulink" href="#">Link 1</a>
<a class="menulink" href="#">Link 2</a>
<a class="menulink" href="#">Link 3</a>

CSS:

a { color: #00f; }
a:hover, a.active { color: #f00; }

JS:

$('.menulink').click(function(){
$(this).addClass("active").siblings().removeClass("active");
});

Answer 4

использовать element.Data:

$('a.menua').hover(function(){
    $(this).css({'color':'#2EC7C7'});
}, function(){
    if($(this).data("is-clicked") === false){
        $(this).css({'color':'white'});
    }
}).live("click", function(){
    $(this).data("is-clicked", !$(this).data("is-clicked"));
});;

Но версия Nicks css , вероятно, , лучший путь.

Answer 5

js:

var link='null';
$('a.menua').click(function(){
    $(link).removeClass('clicked');
        $(this).addClass('clicked');
    link=$(this);

css:

a.menua {
    color: white;
    text-decoration:none;
}
a.menua:hover, a.menua.clicked {
    color: #2EC7C7;
}

Answer 6

Я не проверял, но это может сработать:

$('a.menua').click(function(){
    $('a.menua').unbind('mouseleave');
});

Answer 7

Добавить класс после клика.

CSS

.somecolor {color:#2EC7C7}

JS

$('a.menua').click(function(){
    var $this = $(this);
    if($this.hasClass("somecolor")){
        $(this).removeClass("somecolor");
    }else{
        $(this).addClass("somecolor");
    }
});

$('a.menua').hover(function(){
    $(this).css({'color':'#2EC7C7'});
},
function(){
    $(this).css({'color':'inherit'});
});