Question

基本上，如果你查看我的例子，你会看到你点击一个链接，它启动了切换，然后你可以点击另一个链接，它将切换下一个面板。

我的问题是，在真实的情况下，我计划将精灵用于图标，并且为了将背景位置减去正确的位置，我需要将一个“活动”类应用于激活了切换的链接。我相信我在我的例子中看错了，因为我只是将一个类应用于点击的链接。我不确定如何以我希望的方式应用它，或者确实是可能的。

我的代码是：

http://jsfiddle.net/visualdecree/4A23Z/5/

Answer 1

希望我理解这个问题......

http://jsfiddle.net/4A23Z/8/

我设置样式以突出显示活动菜单项。添加代码以在切换活动LI之前删除LI上的所有活动类。

ul.sidenav li.active { background:cyan; }

 $('.sn').click(function(){
    $('ul.sidenav li').removeClass('active');                 
    $(this).stop(true,true).toggleClass("active");
});

修改

http://jsfiddle.net/4A23Z/10/

$('.sn').click(function(){ $('ul.sidenav li').removeClass('active'); $(this).stop(true,true).addClass("active"); });

Answer 2

如果我理解正确的话 - 请尝试jsfiddle（或定义了有效课程的this）

$(".sn a").on('click',function(){
    var panID = $("#" + $(this).data('panel') );
    $("div[id*='sn-pan-']").hide({slide:'toggle'}, 1000);
    var link = this;
    $(panID).css("left","100px").animate({width:'toggle'}, 500, function()                      { 
        $(".sn a").removeClass("active");
        $(link).toggleClass("active");
    })
})

切换sidenav上的jquery切换类

2 个答案: