Question

I have a Rails app with Twitter Bootstrap installed. Bootstrap encapsulates each navigation bar link in a HTML list element, like so:

<ul class="nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

When a link is the current page, Bootstrap allows you to highlight it by setting the list element’s class (not the link itself) to “active”, like so:

    <li class="active"><a href="#products">Products</a></li>

My question is: how do you set the list element’s class to “active” (if it is the current page) programmatically using Rails?

I know how it can be done for a link. Example:

<%= link_to "Products", products_path, :class => "active" if current_page?(:controller => "products") %>

But I don’t know how it can be done for the parent list element.

Answer 1

Use the content_tag helper:

<%= content_tag :li, :class => 'active' do %>
  List item contents
<% end %>