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 :-)
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>
Please excuse the long answer in advance :)
I have 2 syntactical suggestions:
<a>
ie 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 ie:
<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>
<li>
syntax Problem:
<li>
is missing a hyphen in the class name. Solution:
I think you want:
<li class="nav-item">
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>
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.