Question

I am trying to add some style to the current page to highlight it from the other pages style. But my code does not seem to work... all the numbers look the same!

<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>

Any help is appreciated.

update

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

Picture of the pagination the current page is 3 (the style is applied when i check for the current page).

enter image description here

I am not using any helper.
Here is the generated 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>   

this is the problem

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

it should be

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

for it to work. how to fix that?

since i am on page 3, 3 should be underlined the pagination should be like : <- previous 1 2 3 4 5 next ->

Was it helpful?

Solution

Consider reading the following wiki page. Just simplify your view:

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

To add some special look and feel for the current page link, just set css style for the .current class. will_paginate will do the remaining staff for you and automatically add .current class to the current page link.

Update:

To make your particular case working, just change the css style to reflect the markup

li.active a {
  text-decoration:underline;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top