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

Change class to links and only allow one to be either active or inactive

本文关键字：活动状态 一个 许其中 links      更新时间：2023-09-26

在我的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');
    });
});
相关文章：