Menu
I'm new to HTML and JavaScript and right now I'm faced with a problem that I assume many of you have been dealing with yourself.
I have a nav-bar that doesn't by default changes the active-state when I click on a different page-reference.
The 'Home' nav-item is by default active, and I want to change the active state when I click on other nav-items. But I don't know how to do it? As far is I understand this isn't too many lines of code, but I'd love to get some assistance here.
Here's my code:
<head>
<meta charset="UTF-8">
<title>MaU Movie database</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="mumdblogo.png">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html" id="movielogo"><img src="moviefylogo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="uploads.html">Uploads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h3 class="text-center">Search Movie!</h3>
<form id="searchForm">
<input type="text" class="form-control" id="searchText" placeholder="Search for any movie...">
</form>
</div>
</div>
<div class="container">
<div id="movies" class="row">
</div>
<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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="main.js"></script>
</body>
</html>
998
You can do this one an the end of your code. Just below <script src="main.js"></script>
<script>
$(document).ready(function() {
$( ".mr-auto .nav-item" ).bind( "click", function(event) {
event.preventDefault();
var clickedItem = $( this );
$( ".mr-auto .nav-item" ).each( function() {
$( this ).removeClass( "active" );
});
clickedItem.addClass( "active" );
});
});
</script>
And them instead of follow by link (event.preventDefault()) eg. about.html OR uploads.html this snipet of code change active class for clicked item.
EDIT 1:
For static pages (or served eg. by php) you don't need any aditional js code, BUT you should tweak nav to looks like in below examples (look where 'active' class is, sr-only span current is optional, but well placed in examples).
index.html (your base code)
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="uploads.html">Uploads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
library.html
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="library.html">Library<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="uploads.html">Uploads</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
uploads.html
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="uploads.html">Uploads<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
about.html
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="uploads.html">Uploads</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about.html">About<span class="sr-only">(current)</span></a>
</li>
</ul>
I think that the easiest solution is to check the pathname of in the location object of the window and change the nabber state accordingly.
Something like this would work:
var pathname = window.location.pathname,
pages = ['home', 'library', 'uploads','about'];
$('.nav-item').each(function(i) {
if (pathname.includes(pages[i])) this.addClass('active');
else if (this.className.includes('active')) this.removeClass('active');
});
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
