Question

我有一个1页的投资组合，导航div包含三个“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'); });

这样的东西

此代码中的问题是它需要新的背景隐藏当前的背景！

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

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

Answer 1

你可以试试这个：

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

        function() {

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

            },
        function() {

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

    );

每个“有效”和“无效”的背景不同

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

Answer 2

非常感谢@ Alfie-101，你的解决方案激发了我的灵感，不确定我的方法是否足够整洁，但它的功能却像魅力一样

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

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

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

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

    });`

jQuery用css改变每个li的背景

2 个答案: