"Active" class not working in Bootstrap Navbar

Question

There is another question on this site that is the similar to this one, but unfortunately after trying all of the suggestions following that question, I still haven't found a solution.

My Navbar is looking very basic at this point:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand"<%= link_to 'GoChat', root_path %></a>
    </div>

    <ul class="nav navbar-nav">
        <li class="nav-item">
            <%= link_to 'New Comment', new_comment_path %></li>
        <li class="nav-item active">
            <%= link_to 'View Comments', comments_path %></li>
        <li class="nav item">
            <%= link_to 'Profile', user_path(current_user) %></li>
     </ul>     
  </div>
</nav>

Following the advice given on the question Bootstrap navbar Active State not working, I tried adding the following code to my application js file, but this didn't work. I also tried using html links instead of the embedded Ruby links I'm currently using.

$(".nav-item").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).parent().addClass("active");
});

I also tried using the "nav a" tag in the jquery code, and even the "li" tag too but this didn't work.

I'm not using the Bootstrap CDN - I downloaded the compressed and minified files to my app. I tried with the CDN also but to no effect. Other than that, I think the only thing to mention is that the following code is used in my application js:

//= require rails-ujs

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

and in application css:

 *= require_tree .
 *= require_self
 *= require rails_bootstrap_forms

I don't have any idea of what to try next so I would really appreciate some help on this one, thanks :-)

Answer 1

So first i include the Bootstrap cdn.

After your question has been edited, i think you are missing the jQuery link (necessary for Bootstrap's JavaScript plugins).

  <!--jQuery -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

This is just an example , as your js is targeting HTML class you dont have.

$(".nav-item").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

.active {
  color: red;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href= "/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href= "/stylesheets/styles.css" />

<!--jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<!-- Bootstrap JS -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-collapse.js"></script>
<script src="/bootstrap/js/bootstrap-transition.js"></script>



<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand"<%= link_to 'GoChat', root_path %></a>
    </div>

    <ul class="nav navbar-nav">
        <li class="nav-item">
            <%= link_to 'New Comment', new_comment_path %></li>
        <li class="nav-item active">
            <%= link_to 'View Comments', comments_path %></li>
        <li class="nav-item">
            <%= link_to 'Profile', user_path(current_user) %></li>
     </ul>     
  </div>
</nav>

Answer 2

Please excuse the long answer in advance :)

I have 2 syntactical suggestions:

---

1: <a> i.e. link_to syntax

It looks like in line 4 you have an error in your erb syntax:

Problem:

• This will not work in your view:

  <a class="navbar-brand"<%= link_to 'GoChat', root_path %></a>

• You need to close your <a> tag i.e:

  <a class="navbar-brand"><%= link_to 'GoChat', root_path %></a>

• There's a problem with this. I doubt you want an anchor tag within an anchor tag, but with the given syntax, your code will compile to this:

  <a class="navbar-brand"><a href="/your_root_path">GoChat</a></a>

Solution:

• In Rails, you can achieve what you want here with this:

  <%= link_to 'GoChat', root_path, class: "navbar-brand" %>

• This will compile to:

  <a href="/your_root_path" class="navbar-brand">GoChat</a>

---

2: <li> syntax

Problem:

• Your 3rd <li> is missing a hyphen in the class name.

Solution:

• I think you want:

  <li class="nav-item">

---

---

---

Apropos your question

I think the effect you are trying to achieve can be demonstrated in the snippet below:

$(document).ready(function() {
  $(".nav-item a").click(function() {
    $('.active').removeClass("active");
    $(this).parent().addClass("active");
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">Go Chat</a>
    </div>

    <ul class="nav navbar-nav">
      <li class="nav-item">
        <a href="#">New Comment</a>
      </li>
      <li class="nav-item active">
        <a href="#">View Comments</a>
      </li>
      <li class="nav-item">
        <a href="#">Show Profile</a>
      </li>
    </ul>
  </div>
</nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

---

• However, from looking at your code it seems you are trying to get an active class based on a current route. You can't easily or practically achieve this with JQuery event handlers since the page route will be changed and a new page will be loaded when clicking on a link.

---

Proposed Solution

I would forget the JQuery altogether in this example. Try applying the active class conditionally based on the current route using erb like so:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <%= link_to 'GoChat', root_path, class: "navbar-brand" %>
    </div>

    <ul class="nav navbar-nav">
      <li class="nav-item <%= 'active' if current_page?(new_comment_path) %>">
        <%= link_to 'New Comment', new_comment_path %>
      </li>
      <li class="nav-item <%= 'active' if current_page?(comments_path) %>">
        <%= link_to 'View Comments', comments_path %>
      </li>
      <li class="nav-item <%= 'active' if current_page?(user_path(current_user)) %>">
        <%= link_to 'Profile', user_path(current_user) %>
      </li>
    </ul>    
  </div>
</nav>

---

I hope this helps.

Answer 3

Some time bootstrap doesn't work when our browser is not working, so check it first and add proper online links then execute. So I write some code of 'Active' class bootstrap, just try it.It may help you to solve your problem.Thank you!

    <!DOCTYPE html>
<html lang="en">`enter code here`
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active" ><a href="wordpress.com" target="blank">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</nav>
</body>
</html>