2

ビューからテーブル ヘッダーの背景色を変更して、テーブル ヘッダーの 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 を使用できません

4

4 に答える 4

4

これは、いくつかの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

このコードを使用すると、クラスとして持っているテーブル ヘッダーが:class => hilite、私が質問したこのスタイルに変更されます。

これを手伝ってくれてありがとう、私はウェブ開発の初心者です。

于 2013-08-05T00:35:18.797 に答える
1

コーヒースクリプト:

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

CSS:

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

1 つしかないことを確認してください#title_header。それ以外の場合は、クラスに変更してください。

更新
コメントで言うようにJavaScriptを使用したくない場合：

%table#movies
  %thead
   %tr
    %th= link_to "Movie Title", movie_path, :id => "title_header", onclick: "$(this).css('background-color', 'yellow')"
于 2013-08-03T01:19:14.750 に答える
0 
%th{:class => ("hilite" if params[:id]== "title_header")}= link_to 'Movie Title', movies_path(id: 'title_header')
于 2013-10-27T15:23:51.803 に答える
0

:visited疑似セレクターを使用できます。

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

上記のスタイルは、訪問したリンクに適用されます。ただし、スタイルはaではなくに適用されることに注意してくださいth。

于 2013-08-03T02:38:32.183 に答える