3

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

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

4 回答 4

3

您可以在此处继续链接，无需使用 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
});

请注意，在单击处理程序中首先删除任何活动类。

于 2012-09-10T18:17:07.210 回答
0

这是使用 css3 转换的一个：

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

于 2012-09-10T18:35:57.230 回答
0 
$("#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它首先从它可能已附加到的所有链接中删除该类，然后将其设置为当前链接。

于 2012-09-10T18:17:45.460 回答
0

我实际上建议使用 ':active' 和 ':hover' 通过 CSS3 添加悬停和点击效果

至于一些jQuery：

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

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

于 2012-09-10T18:23:33.177 回答