Question

我正在为网站创建一个菜单。我正在尝试在链接上完成悬停和点击效果。我希望在列表的元素 a 上使用悬停事件来触发颜色动画并添加“活动”类。如果触发了单击和悬停事件，我想为该元素分配相同的类。问题是，一旦元素没有悬停并且点击了其他元素，就必须删除该类。这是代码：

<div id="menu">
        <ul>
            <li><a href="#" id="btHome">HOME</a></li>
            <li><a href="#" id="btAbout">NOSOTROS</a></li>
            <li><a href="#" id="btGallery">GALERIA</a></li>
            <li><a href="#" id="btContact">CONTACTO</a></li>
        </ul>
</div>

CSS：

.active{
    color:#0CF;
    background-image:url(../img/select.png);
    background-repeat:no-repeat;
    background-position:right center;
}

jQuery的：

$("#menu ul li a").hover(function() {
    $(this).stop().animate({color: "#0CF"}, 250); //I have the jQueryUI plugin
},function() {
    $(this).stop().animate({color: "#FFF"}, 100);
});

$("#menu ul li a").click(function() {
    $(this).toggleClass('active', 150);
});

Answer 1

您可以在此处继续链接，无需使用2个单独的选择器：

var allLinks = $("#menu ul li a").hover(function() {
    $(this).stop().animate({color: "#0CF"}, 250);
},function() {
    var $this = $(this);
    if(!$this.hasClass('active')) // if it is not the active link
        $this.stop().animate({color: "#FFF"}, 100);
}).click(function() {
    allLinks.removeClass('active');
    $(this).toggleClass('active', 150); // may need to adjust the timing here for better UX
});

请注意，点击处理程序首先删除所有活动的类。

Answer 2

$("#menu ul li a").hover(function() {
    $("#menu ul li a").removeClass('active');
    $(this).addClass('active');
    $(this).stop().animate({color: "#0CF"}, 250); //I have the jQueryUI plugin
},function() {
    $(this).stop().animate({color: "#FFF"}, 100);
});

$("#menu ul li a").click(function() {
    $("#menu ul li a").removeClass('active');
    $(this).addClass('active');
});

首先从它可能附加到的所有链接中删除类active，然后将其设置为当前链接。

Answer 3

我实际建议使用＆＃39;：active＆＃39;通过CSS3添加悬停和点击效果。和＆＃39;：悬停＆＃39;

至于一些jQuery：

$('#menu li a').click(function() {
    $('#menu li a').not(this).removeClass('active');
    $(this).addClass('active');
});

一个例子 - http://jsfiddle.net/claycauley/AzXgX/

Answer 4

这是使用css3过渡的一个：

http://jsfiddle.net/wrtyM/2/

jQuery悬停/单击类

4 个答案: