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

Question

I want to change the table header background color from a view, so that when I click on the table header URL, its background color changes.

I have this resumed view in Haml:

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

And this the CSS style I want to apply to the table header once “Movie Title” gets clicked on:

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

I don't know how to bind a click with the table header background color. This problem was taken from a online course it's a homework, and we can't use javascript

Answer 1

This is the solution I've found in some Git repository

A helper method is requerid for checking if the %th is the class I need to apply the style

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

Previous method is called in the view just in the %th tag

%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

With this code the table header which have as class :class => hilite will be changed to the this style that I put on the question.

Thanks to you all for helping me with this, I am new in web development.

Answer 2

Coffeescript:

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

CSS:

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

Make sure you have only one #title_header – otherwise, change it to a class.

Update
If you don't want to use javascript like you say in your comment:

%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')