2013-07-16 38 views
1

我想向當前頁面添加一些樣式以突出顯示其他頁面樣式。但我的代碼似乎不工作......所有的數字看起來都一樣!rails 3.2將分頁更改風格當前頁面

<section id="pagination"> 
    <nav> 
    <ul> 
     <li><a class='<%= "active" if (params[:page]).to_i == @myths.current_page %>'> 
       <!-- checking current page and params page --> 
       <%= @myths.current_page.to_i %> <br> <%= (params[:page]).to_i %> <br> 
       <%= will_paginate @myths, :inner_window => 1, :outer_window => 1, :previous_label => '&#8592; previous', :next_label => 'next &#8594;' %> 
     </a></li> 
    </ul> 
    </nav> 
</section> 

任何幫助表示讚賞。

更新

CSS
a.active{text-decoration:underline;}

圖片分頁的當前頁是3(當我檢查當前頁面的樣式應用)。

enter image description here

我沒有使用任何的幫助。
這裏是生成的html

<section id="pagination"> 
     <nav> 
      <ul> 
      <li><a class='active'> 
       3 <br> 3 <br> 
       <div class="pagination"> 
       <ul> 
       <li class="prev previous_page "> 
       <a rel="prev" href="/tags/Justice?page=2">&#8592; previous</a> 
       </li> 
       <li><a rel="start" href="/tags/Justice?page=1">1</a></li> 
       <li><a rel="prev" href="/tags/Justice?page=2">2</a></li> 
       <li class="active"><a href="/tags/Justice?page=3">3</a></li>    
       <li><a rel="next" href="/tags/Justice?page=4">4</a></li> 
       <li><a href="/tags/Justice?page=5">5</a></li> 
       <li class="next next_page "> 
       <a rel="next" href="/tags/Justice?page=4">next &#8594;</a> 
       </li> 
       </ul> 
       </div> 
      </a></li> 
     </nav> 
     </section> 

這是問題

<li class="active"><a href="/tags/Justice?page=3">3</a></li> 

應該

<li><a class="active" href="/tags/Justice?page=3">3</a></li> 

爲它工作。如何解決這個問題?

因爲我是第3頁,3應該強調的分頁應該是這樣的:< - 上一頁1 2 3 4 5下一頁 - >

+0

爲什麼在你的例子兩個'sections'? – phoet

+0

只是一個錯字:|。刪除它 – mamesaye

回答

0

考慮閱讀的following維基頁面。只是簡化您的觀點:

<section id="pagination"> 
    <%= will_paginate @myths, :inner_window => 1, :outer_window => 1, :previous_label => 
</section> 

要爲.current類中添加一些特殊的外觀和感覺當前頁面的鏈接,只需設置CSS樣式。 will_paginate將爲您完成剩餘的工作人員並自動將.current課程添加到當前頁面鏈接。

更新:

爲了使您的特定情況下工作,只需更改CSS樣式,以反映標記

li.active a { 
    text-decoration:underline; 
} 
+0

去了那個頁面,並嘗試所有的CSS樣式,仍然有相同的pb – mamesaye

+0

你可以更新與該幫助器生成的HTML的答案。和不適合你的CSS類? – roody

+0

我更新我的問題與CSS,生成的HTML和圖像 – mamesaye