ruby-on-railstwitter-bootstraptwitter-bootstrap-rails

Dynamically add active class to bootstrap li in Rails


in the bootstrap navigation bar. You can get the effect of a button being clicked by adding the class active . Naturally, I want to use this on my pages. For example if I'm on the about us page I want the about us button clicked.

What is the best way to go about this? I was going to go to each page and at the bottom have a jQuery function add the class active to it. Is there a better way?


Solution

  • Read about current_page? here

    You can add a method for handle logic with current_page?, example a method :

    module ApplicationHelper
    
     def active_class(link_path)
      current_page?(link_path) ? "active" : ""
     end
    
    end
    

    example bootstrap navbar template

    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Title</a>
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>
    </div>
    

    So, on view looks like

    HTML

    <li class="<%= active_class(some_path) %>">
    <%= link_to "text of link", some_path %>
    </li>
    

    HAML

    %li{:class => active_class(some_path)}
      = link_to "text of link", some_path
    

    Or you can use request.fullpath to get current full of path if a current path have a parameter

    example

    <ul>
     <% Contry.all.each do |c| %>
      <li class="snavitem <%= active_class(contry_path(c)) %>">
        <%= link_to "show #{c.name}", contry_path(c) %>
      </li>
     <% end %>
    </ul>
    

    and on your application_helper.rb

    def active_class(link_path)
      request.fullpath == link_path ? "active" : "" 
    end
    

    read about request.fullpath here