Question

我每次点击它时都试图突出显示标题标题或发布日期标题，但我无法做到。我正在使用Ruby 1.9.3和Rails 3.2.14

我认为这是我控制器或视图中的内容，但我不明白。它排序，但标题中没有应用黄色突出显示。

这是我的movies_controller文件（只是相关部分）：

class MoviesController < ApplicationController

...

  def index
    @movies = Movie.find(:all, :order => params[:sort_by])

    if params[:sort_by] == 'title'
      @title_header = 'hilite'
    elsif params[:sort_by] == 'release_date'
      @release_header ='hilite'
    end
  end

...

我的查看文件（是HAML）：

-#  This file is app/views/movies/index.html.haml
%h1 All Movies

%table#movies
  %thead
    %tr
      %th{:class=>@title_header, :id=> "title_header"}= link_to "Movie Title", movies_path(:sort_by => 'title')
      %th Rating
      %th{:class=>@release_header, :id=> "release_date_header"}= link_to "Release Date", movies_path(:sort_by => 'release_date')
      %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

最后，我的application.css：

html, body {
  margin: 0;
  padding: 0;
  background: White;
  color: DarkSlateGrey;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 10pt;
}
div#main {
  margin: 0;
  padding: 0 20px 20px;
}
a {
  background: transparent;
  color: maroon;
  text-decoration: underline;
  font-weight: bold;
}
h1 {
  color: maroon;
  font-size: 150%;
  font-style: italic;
  display: block;
  width: 100%;
  border-bottom: 1px solid DarkSlateGrey;
}
h1.title {
  margin: 0 0 1em;
  padding: 10px;
  background-color: orange;
  color: white;
  border-bottom: 4px solid gold;
  font-size: 2em;
  font-style: normal;
}
table#movies {
  margin: 10px;
  border-collapse: collapse;
  width: 100%;
  border-bottom: 2px solid black;
}
table#movies th {
  border: 2px solid white;
  font-weight: bold;
  background-color: wheat;
}

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

table#movies th, table#movies td {
  padding: 4px;
  text-align: left;
}
#notice #warning {
  background: rosybrown;
  margin: 1em 0;
  padding: 4px;
}
form label {
  display: block;
  line-height: 25px;
  font-weight: bold;
  color: maroon;
}

更新：渲染后的HTML源代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Rotten Potatoes!</title>
    <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css" />
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
    <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
    <script src="/assets/application.js?body=1" type="text/javascript"></script>
    <meta content="authenticity_token" name="csrf-param" />
    <meta content="jJOoNtKNLzZb+w8ywbDStDxk5TbODkv8fUtgX1bEvFU=" name="csrf-token" />
  </head>
  <body>
    <h1 class='title'>Rotten Potatoes!</h1>
    <div id='main'>
      <h1>All Movies</h1>
      <table id='movies'>
        <thead>
          <tr>
            <th id='title_header'><a href="/movies?sort_by=title">Movie Title</a></th>
            <th>Rating</th>
            <th id='release_date_header'><a href="/movies?sort_by=release_date">Release Date</a></th>
            <th>More Info</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Star Wars</td>
            <td>PG</td>
            <td>1977-05-02 00:00:00 UTC</td>
            <td><a href="/movies/1">More about Star Wars</a></td>
          </tr>
          <tr>
            <td>Aladdin</td>
            <td>G</td>
            <td>1992-11-25 00:00:00 UTC</td>
            <td><a href="/movies/2">More about Aladdin</a></td>
          </tr>
          <tr>
            <td>The Terminator</td>
            <td>R</td>
            <td>1984-10-26 00:00:00 UTC</td>
            <td><a href="/movies/3">More about The Terminator</a></td>
          </tr>
          <tr>
            <td>When Harry Met Sally</td>
            <td>R</td>
            <td>1989-07-21 00:00:00 UTC</td>
            <td><a href="/movies/4">More about When Harry Met Sally</a></td>
          </tr>
          <tr>
            <td>The Help</td>
            <td>PG-13</td>
            <td>2011-08-10 00:00:00 UTC</td>
            <td><a href="/movies/5">More about The Help</a></td>
          </tr>
          <tr>
            <td>Chocolat</td>
            <td>PG-13</td>
            <td>2001-01-05 00:00:00 UTC</td>
            <td><a href="/movies/6">More about Chocolat</a></td>
          </tr>
          <tr>
            <td>Amelie</td>
            <td>R</td>
            <td>2001-04-25 00:00:00 UTC</td>
            <td><a href="/movies/7">More about Amelie</a></td>
          </tr>
          <tr>
            <td>2001: A Space Odyssey</td>
            <td>G</td>
            <td>1968-04-06 00:00:00 UTC</td>
            <td><a href="/movies/8">More about 2001: A Space Odyssey</a></td>
          </tr>
          <tr>
            <td>The Incredibles</td>
            <td>PG</td>
            <td>2004-11-05 00:00:00 UTC</td>
            <td><a href="/movies/9">More about The Incredibles</a></td>
          </tr>
          <tr>
            <td>Raiders of the Lost Ark</td>
            <td>PG</td>
            <td>1981-06-12 00:00:00 UTC</td>
            <td><a href="/movies/10">More about Raiders of the Lost Ark</a></td>
          </tr>
          <tr>
            <td>Chicken Run</td>
            <td>G</td>
            <td>2000-06-21 00:00:00 UTC</td>
            <td><a href="/movies/11">More about Chicken Run</a></td>
          </tr>
        </tbody>
      </table>
      <a href="/movies/new">Add new movie</a>
    </div>
  </body>
</html>

Answer 1

可以在CSS上进行突出显示。

所以你可以这样做：

.hilite a:visited {
    background-color: yellow;
}

点击后会突出显示链接。

如果您想在指向光标的同时突出显示该链接，请将“已访问”替换为“悬停”。

Answer 2

如果您修改了电影控制器，您的代码将会起作用：

def index
   @movies = Movie.all(:order => "title ASC, release_date ASC")
   if params[:sort_by] == 'title'
      @title_header = 'hilite'
    elsif params[:sort_by] == 'release_date'
      @release_header ='hilite'
   end 
end

突出显示标题和发布标题

2 个答案: