jquery - 切换sidenav上的jquery切换类

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（或者这个定义了活动类）

$(".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");
    })
})

 ​