rails 3.2将分页更改样式当前页面

时间:2013-07-16 18:06:52

标签: ruby-on-rails-3 will-paginate current-page

我正在尝试向当前页面添加一些样式以从其他页面样式突出显示它。但我的代码似乎不起作用......所有数字看起来都一样!

<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应该加下划线,分页应该是:&lt; - previous 1 2 3 4 5 next - &gt;

1 个答案:

答案 0 :(得分: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;
}