1

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

<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(当我检查当前页面时应用样式)。

在此处输入图像描述

我没有使用任何助手。
这是生成的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 应该加下划线,分页应该是这样的:<- previous 1 2 3 4 5 next ->

4

1 回答 1

0

考虑阅读以下wiki 页面。只需简化您的视图:

<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;
}
于 2013-07-16T21:38:12.347 回答