Ruby on Rails：渲染不同部分时动态添加 css答案

【问题标题】：Ruby on Rails: adding css dynamically when rendering different partialsRuby on Rails：渲染不同部分时动态添加 css
【发布时间】：2016-07-03 03:14:32
【问题描述】：

我正在通过 ajax 渲染不同的视图，我想知道如何管理 css。我有两个按钮，我想突出显示活动按钮。

index.haml

#button-group
  = link_to grid_view_path, class: "col-xs-3", remote: true do
    %span.glyphicon.glyphicon-th
  = link_to flat_view_path, class: "col-xs-3", remote: true do
    %span.glyphicon.glyphicon-th-list

#view-container
  = render "grid_view"

grid_view.js.erb

$('#view-container').html("<%= j render :partial => 'grid_view' %>");

flat_view.js.erb

$('#view-container').html("<%= j render :partial => 'flat_view' %>");

welcome_controller.rb

class WelcomeController < ApplicationController

  def index
    respond_to do |format|
      format.html    
      format.js
    end    
  end

  def flat_view
  end

  def grid_view
  end

end

在初始页面加载时，索引页面显示grid_view部分，然后用户可以单击按钮，它将显示平面视图或网格视图。目前，字形图标都以蓝色突出显示（假设为默认值）。我可能想为 non-active 按钮添加一个类，并在 active 按钮上保持蓝色。最好的方法是什么？或者如果有其他方法我应该做，请帮忙。

【问题讨论】：

如果两个视图（即 html 布局）之间没有显着差异，那么我认为添加一个类是您的最佳选择
@kasperite 我将如何添加课程？而且这两种视图是不同的，一种是网格布局，一种是平面布局。而且我只是指需要添加活动/非活动类的按钮，我不需要向 html 布局添加任何类

标签： css ruby-on-rails ruby ajax ruby-on-rails-4

【解决方案1】：

我认为你可以直接使用引导标签功能。

只需在 tab-content 部分放置渲染部分，相应的选项卡将自动突出显示。

【讨论】：

【解决方案2】：

在 js.erb 文件中：

$('#button_to_acc_class_to').addClass('non-active');

虽然您可能实际上想要创建一个像initializeView(view) 这样的JS 函数，其中包含上述代码，以及在视图更改时需要更改的所有其他内容，并从您的js.erb 文件中调用它。我会采用这种方法，因为您可能会在视图更改时添加许多行为，当您完成时。

【讨论】：