Question

在我的Rails 3应用中，我有一个<ul>包含三个链接，点击后，将相应的部分加载到下面的<div>。我想使用一些JavaScript / jQuery来检测加载了哪个部分。这样我就可以将<a href>的类更改为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 -->

非常感谢任何帮助。

UPDATE 我使用了这段代码，但是如果我点击第一个链接，它就不再是无法切换到非活动状态了。另外两个工作很棒。

$(function(){
    $("a.inactive").click(function() {
        $(".active").not(this).toggleClass("inactive active");
        $(this).toggleClass("inactive active");
    });
});

Answer 1

您可以在JS中设置其他点击事件。它需要在此页面加载时运行：

$(document).ready(function() {

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

});

这也适用于您的应用中具有相同结构的任何其他#tabs。从内存来看，我认为这不会以任何方式影响:remote => true功能。

Answer 2

我在another question得到了答案：

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

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

2 个答案: