Question

我有4个链接可以改变网页内4个div的位置。我在使用以下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）时的颜色。

Craver建议添加一个带有jQuery的类应该在你离开后保持颜色，正如他所说，将样式信息保存在CSS中是很好的。

如果您使用所有四种可能的链接样式，请确保按以下顺序排列：

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

你可以通过LoVe HAte记住它 - 链接，访问，悬停，活动。

另一个想法 - 您在悬停和点击期间尝试使链接颜色相同。我建议让它们变得有点不同可能会更好。在点击期间改变颜色会给用户提供他们击中目标的视觉反馈。

Answer 3

使用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 4

我想你想要这个： live solution

所以，我使用jQuery向链接添加类。我还设置了脚本，一次只允许一个项目处于活动状态（这是此解决方案与Nick的主要区别）。

<强>更新

悬停效果现在也是基于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 5

点击后添加课程。

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

Answer 6

我没有测试过，但这可能有用：

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

Answer 7

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

jQuery悬停和单击功能

7 个答案: