Menu
I'm not understanding how Twitter Bootstrap does active links for the navigation. If I have a regular navigation like this (with ruby on rails linking):
<ul class="nav"> <li class="active"> <a href="/link">Link</a> </li> <li class=""> <a href="/link">Link</a> </li> <li class=""> <a href="/link">Link</a> </li> </ul> How do I keep it active based on the link clicked?
834
To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.
To set the active class to the navigation menu dynamically by scrolling or clicking on the navigation links, the active class is to be set on each section depending on the position of the webpage. To add methods and variables, JavaScript is used.
To make the clicked tab active in the navigation bar, the <li> corresponding to the clicked href in index. html introduces the css of 'active' class and removes the 'active' class from the previous <li> on click.
The . navbar class is used to create a navigation bar. The navbar can extend or collapse, depending on the device size ie, the navbar is used to create the responsive design by using . navbar-expand-xl|lg|md|sm class.
You can use something like (very similar to what @phil mentioned, but a little shorter):
<ul class="nav"> <li class="<%= 'active' if current_page?(root_path) %>"><%= link_to "Home", root_path %></li> <li class="<%= 'active' if current_page?(about_path) %>"><%= link_to "About", about_path %></li> <li class="<%= 'active' if current_page?(contact_path) %>"><%= link_to "Contact", contact_path %></li> </ul> Just made an answer on the very same question here Twitter Bootstrap Pills with Rails 3.2.2
<ul class="nav"> <li class="<%= 'active' if params[:controller] == 'controller1' %>"> <a href="/link">Link</a> </li> <li class="<%= 'active' if params[:controller] == 'controller2' %>"> <a href="/link">Link</a> </li> <li class="<%= 'active' if params[:controller] == 'controller3' %>"> <a href="/link">Link</a> </li> </ul> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
