html - 从 Rails 视图更改 Haml 表的 CSS 属性

Question

我想从视图中更改表头背景颜色，以便当我单击表头 URL 时，它的背景颜色会发生变化。

我在 Haml 中有这个恢复视图：

%table#movies
  %thead
   %tr
    %th= link_to "Movie Title", movie_path, :id => "title_header" -#this is the table header

这是我想在点击“电影标题”后应用到表头的 CSS 样式：

table#movies th {
  background-color: yellow;
}

我不知道如何将单击与表头背景颜色绑定。这个问题取自一个在线课程，它是一个家庭作业，我们不能使用 javascript

Answer 1

这是我在一些 Git 存储库中找到的解决方案

需要一个辅助方法来检查 %th 是否是我需要应用样式的类

def helper_class(field)
 if(params[:sort].to_s == field)
   return 'hilite'
 else
   return nil
 end
end

在 %th 标记中的视图中调用上一个方法

%table#movies
  %thead
    %tr
      %th{:id => 'title_header', :class => helper_class('title') }= link_to "Movie Title", movies_path(:sort=>'title', :ratings =>params[:ratings]), :id => 'title_header'
      %th Rating
      %th{:id => 'release_date_header', :class => helper_class('release') }= link_to "Release Date", movies_path(:sort=>'release',:ratings =>params[:ratings]), :id => 'release_date_header'
      %th More Info
  %tbody
    - @movies.each do |movie|
      %tr
        %td= movie.title 
        %td= movie.rating
        %td= movie.release_date
        %td= link_to "More about #{movie.title}", movie_path(movie)

= link_to 'Add new movie', new_movie_path

使用此代码，具有 as 类的表头:class => hilite将更改为我提出的问题的这种样式。

感谢大家帮助我，我是网络开发的新手。

Answer 2

咖啡脚本：

$('#title_header').click( ()->
  $(this).toggleClass('active')
)

CSS：

#title_header.active {
  background-color: yellow;
}

确保你只有一个#title_header- 否则，将其更改为一个类。

更新
如果您不想像评论中所说的那样使用 javascript：

%table#movies
  %thead
   %tr
    %th= link_to "Movie Title", movie_path, :id => "title_header", onclick: "$(this).css('background-color', 'yellow')"

Answer 3

You can use the :visited pseudo selector.

#movies th a:visited {
  background-color: yellow;
}

The styles above are applied for visited links. However, note that the styles are applied on a, not th.

Answer 4

%th{:class => ("hilite" if params[:id]== "title_header")}= link_to 'Movie Title', movies_path(id: 'title_header')