0
머리글을 클릭 할 때마다 제목 머리글이나 머리글을 강조 표시하려고하지만이를 만들 수 없습니다. Ruby 1.9.3과 Rails 3.2.14를 사용하고 있습니다.제목과 머리글 강조 표시
컨트롤러 나 뷰에 뭔가 있다고 생각되지만, 이해가 가지 않습니다. 정렬되지만 헤더에 노란색 강조 표시가 적용되지 않습니다.
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 :
다음는 내 movies_controller 파일 (단지 관련 부분)입니다
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>
나는이 프로젝트는 CSS가 위와 같이 제공해야하는 필수라고 생각합니다 : 테이블 # 영화 th.hilite { 배경 색상 : 노랑; } –
브라우저에서 렌더링 한 후 html 소스를 게시하십시오. –
업데이트 된 게시물보기 –