Javascript 将类更改为链接，只允许一个处于活动或非活动状态

在我的Rails 3应用程序中，我有一个包含三个链接的应用程序，当单击该应用程序时，会将相应的部分加载到下面的页面中。我想使用一些JavaScript/jQuery来检测加载了哪个部分。这样我就可以将的类更改为active或inactive以进行样式设置

<div id="tabs">
  <ul id="infoContainer">
    <li><%= link_to "Reviews", profile_reviews_profile_path, :class => 'active', :remote => true %></li>
    <li><%= link_to "About", profile_about_profile_path, :class => 'inactive', :remote => true %></li>
    <li><%= link_to "Credits", profile_credits_profile_path, :class => 'inactive', :remote => true %></li>
  </ul>
  <div id="tabs-1">
    <%= render :partial 'profile_reviews %> #default
  </div>
</div><!-- end tabs -->

---

您可以在JS中设置额外的单击事件。此页面加载时需要运行：

$(document).ready(function() {

  $("#tabs > ul a").click(function(){
    $this = $(this)
    $this.siblings(".active").toggleClass("active")
    $this.addClass("active"
  })

});

这也适用于应用程序中具有相同结构的任何其他选项卡。从内存来看，我认为这不会以任何方式影响：remote=>真正的功能。

我在以下方面找到了答案：

$(document).ready(function() {

  $("#tabs > ul a").click(function(){
    $this = $(this)
    $this.siblings(".active").toggleClass("active")
    $this.addClass("active"
  })

});

$(function(){
    var sidebar=$('#sidebar');
    sidebar.delegate('a', 'click',function(){
        sidebar.find('.active').toggleClass('active inactive');
        $(this).addClass('active').removeClass('inactive');
    });
});