Question

I took out this snippet to explain my issue.

<ul class="nav nav-pills nav-stacked red"> 
    <li><%= link_to "Home",   'http://localhost:3000/home' %></li>
    <li><%= link_to "About",   'http://localhost:3000/about', :data => {:toggle=>"pill"} %></li>
</ul>

If I click on “Home”, the link brings me to ‘http://localhost:3000/home’. If I click on about, the pill toggles but the link does not work. This is the resulting html:

<ul class="nav nav-pills nav-stacked red">
    <li><a href="http://localhost:3000/home">Home</a></li>
    <li><a href="http://localhost:3000/about" data-toggle="pill">About</a></li>
</ul>

My goal is to be able to click a link, go to the address and have the corresponding pill highlighted.

I saw the tip about data-toggle=”pill” here: http://twitter.github.com/bootstrap/javascript.html#tabs

Thanks for the help!

Answer 1

I wound up doing a check if the current page was active

<li class="<%= 'active' if current_page?(root_path) %>">
    <%=link_to root_path do %>
        <i class="icon-white icon-home"></i>
        Home
    <% end %>
</li>