在我的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");
});
});
你可以在JS中设置一个额外的点击事件。它需要在页面加载时运行:
$(document).ready(function() {
$("#tabs > ul a").click(function(){
$this = $(this)
$this.siblings(".active").toggleClass("active")
$this.addClass("active"
})
});
这也适用于任何其他具有相同结构的#tabs
在你的应用程序。从记忆中,我不相信这会影响:remote => true
的功能在任何方面。
我从另一个问题中得到了答案:
$(function(){
var sidebar=$('#sidebar');
sidebar.delegate('a', 'click',function(){
sidebar.find('.active').toggleClass('active inactive');
$(this).addClass('active').removeClass('inactive');
});
});