jQuery функция наведения и щелчка

Я бы использовал 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.

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

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

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

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

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

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

использовать элемент.Данные:

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

Но CSS-версия Nicks вероятно лучше.

Я думаю, вам нужно это: действующее решение

Итак, я использую 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");
});

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

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

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

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

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;
}