突出顯示標題和發佈標題

我試圖突出標題標題或發佈日期標題每次點擊它，但我不能做到。我使用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>

來源

2013-11-04 Mr_LinDowsMac

突出顯示可以在您的CSS上完成。

所以，你可以做如下：

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

這將突出顯示的鏈接你點擊後。

如果你想突出的鏈接指向的同時將鼠標停留在它取代「參觀」與「懸停」。

來源

2013-11-04 06:14:43

我認爲是強制性的這個項目像上面提供的CSS有：表＃電影th.hilite { 背景色：黃色; } –

請在瀏覽器中渲染後發佈您的html源代碼。 –

查看帖子已更新 –

如果您修改電影控制器如您的代碼將工作：

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

來源

2014-04-11 16:59:47 user3435842

突出顯示標題和發佈標題

回答

相關問題