0

I using gem https://github.com/seyhunak/twitter-bootstrap-rails/ and navbar helpers from them to build header.

For ex. i have a users link in my header. And if current url is '/users', users link sets active and highlighted correcrly. But if current url is '/users?top10=true', users link did not set active. Is there right behavior? Because html page for '/users' and /users?top10=true' is the same page with different content.

Is there bug or feature?

shade88
  • 102
  • 8
  • This is not a bug. Seems implementation issue. Can you show your layout where you are setting it active/non-active? – RAJ Apr 20 '15 at 07:10
  • @RAJ active/non-active maked inside https://github.com/seyhunak/twitter-bootstrap-rails/#nav-links I just write `= menu_item 'Users', users_path` in my header. – shade88 Apr 20 '15 at 07:25
  • It checks for proper match and not so reliable, solution can be manually setting active/non-active – RAJ Apr 20 '15 at 07:29
  • @RAJ yes, manually setting active/non-active is solution. But i am interesting, Is there right helper's behavior? – shade88 Apr 20 '15 at 07:39
  • I have added the explaination in the answer to avoid long list of comments – RAJ Apr 20 '15 at 07:59
  • maybe, use `request.fullpath` method http://stackoverflow.com/a/17482101/1297435 – rails_id Apr 20 '15 at 11:08

1 Answers1

1

Bootstrap will only consider link as active if and only if path will match with href's value. It don't have support for query strings yet. You can use following code options to make links active/non-active with custom code:

<ul class="nav">
  <li class="<%= 'active' if controller_name == 'controller1' %>">
    <%= link_to "Link1", "/link1" %>
  </li>
  <li class="<%= 'active' if controller_name == 'controller2' %>">
    <%= link_to "Link2", "/link2" %>
  </li>
  <li class="<%= 'active' if controller_name == 'controller3' %>">
    <%= link_to "Link3", "/link3" %>
  </li>        
</ul>

Or you can use jQuery:

var url = window.location;

$('ul.nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');
RAJ
  • 9,697
  • 1
  • 33
  • 63