addClass和removeClass在单击此类时的两个元素

我使用与tabify插件组合的fancybox插件，以便我可以单击某个链接并具有选项卡式灯箱。这里没有问题 - 但是，我希望能够点击一个链接来激活特定选项卡上的活动状态，并从另一个选项卡中移除活动状态。addClass和removeClass在单击此类时的两个元素

这里是jQuery的：

$("a.timesheet-active").click(function() { 
     if ($('li').hasClass('active')) { 
     $('li.active').addClass('inactive').removeClass('active'); 
     } 
     if ($('li').hasClass('inactive')) { 
     $('li.inactive').removeClass('inactive').addClass('active'); 
    } 
}); 


<ul id="menu"> 
    <li class="active"><a id="aa-pp" href="#reserve-pp"></a></li> 
    <li class="inactive"><a id="aa-ts" href="#reserve-timesheets"></a></li> 
</ul>

这里的目标是当a.timesheet活性被点击，li.active变成li.inactive，并li.inactive变成li.active

任何帮助表示赞赏！

来源

2012-08-13 RooWM

$("a.timesheet-active").on('click', function(e) { 
    e.preventDefault(); 
    $('li.active, li.inactive').toggleClass('inactive active'); 
});

如果它是一个<a>元素，通常需要阻止默认动作，然后它只是切换的两种元素两个类在它们之间进行切换的问题。

FIDDLE

来源

2012-08-13 18:07:05 adeneo

工作好有一个问题：当你点击a.timesheet活性首次切换发生时，如果用户关闭灯箱，再次单击该链接，就会切换再次打开在错误的选项卡上。 – RooWM 2012-08-13 18:27:08

addClass和removeClass在单击此类时的两个元素

回答

相关问题