Question

我通过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 部分，然后用户可以单击按钮，它将显示平面视图或网格视图。目前，glyphicon都突出显示为蓝色（假设其默认值）。我可能想要在非活动按钮中添加一个类，并将蓝色保持在活动的那个上。最好的方法是什么？或者，如果我还有其他方法，请帮忙。

Answer 1

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

只需在标签内容部分放置渲染部分，相应的标签就会自动突出显示。

Answer 2

在js.erb文件中：

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

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

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

2 个答案: