0

我有一个带有导航 div 的 1 页投资组合，其中包含三个具有三个不同背景图像的“li”项目，当您悬停时，每个“li”项目都有一个不同的背景图像。

#nav li.portfolio a:link, #nav li.portfolio a:visited {background:url(../img/icon_folio.png) no-repeat 10px 5px; display:block;}
#nav LI.portfolio a:hover, #nav LI.portfolio a:active, li.portfolio.active {background:url(../img/icon_folio.png) no-repeat 10px -100px;}

#nav li.about a:link, #nav li.about a:visited {background:url(../img/icon_me.png) no-repeat 10px 5px; display:block;}
#nav li.about a:hover, #nav li.about a:active {background:url(../img/icon_me.png) no-repeat 10px -105px;}

我想要的是在单击成为选定元素时以某种方式定位每个链接，例如$('#nav li a').click(function(){ $('#nav li').removeClass('active'); $(this).parent().addClass('active'); });

这段代码的问题是它需要当前背景后面的新背景！

有没有办法在我单击时实际删除当前背景，并将其替换为悬停时使用的背景？

非常感谢您，我通过这个网站学习并解决了很多问题！

4

2 回答 2

1

非常感谢@Alfie-101，你的解决方案启发了我，不确定我的方法是否足够整洁，但它就像一个魅力

$('#nav li').addClass('inactive');

$('#nav li a').click(function(){

    $('#nav li').removeClass('active').addClass('inactive');

    $(this).parent().removeClass('inactive').addClass('active');

    });`
于 2011-06-06T17:26:56.983 回答
1

你可以试试这个：

$('#nav li a').toggle(

        function() {

            $('#nav li').removeClass('inactive').addClass('active');

            },
        function() {

            $('#nav li').addClass('inactive').removeClass('active');
        }

    );

每个“活跃”和“不活跃”都有不同的背景

您还可以查看.toggleClass() Jquery toggleClass

于 2011-06-06T02:49:16.490 回答