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存储库中找到的解决方案

帮助方法是requerid，用于检查％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

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

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

Answer 2

CoffeeScript的：

$('#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

您可以使用:visited伪选择器。

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

上述样式适用于访问过的链接。但请注意，这些样式适用于a，而不是th。

Answer 4

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

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

4 个答案: