How can I darken the background when a linked is clicked? - php

Question

I am currently working on the navbar of my website.
There are five elements on my navbar and I'd like to make an element darker when it is clicked.
These is what I've tried so far:
jQuery to change the active element:
<script type="text/javascript">
$(function(){
$('nav navbar-nav a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
$('nav navbar-nav a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active')
})
})
</script>
The five elements on the navbar:
<nav class = "navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Intern Web</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>News</li>
<li>Intern</li>
<li>Form</li>
</ul>
This is a screenshot of the website:
But it seems to not be working, only About is selected every single time.
Any ideas? Thanks a lot.

Answer 1

<script type="text/javascript">
$(function(){
$(".navbar-nav li a").on('click',function(){
$(nav-bar-nav li).toggleClass("active");
});
});
<ul class="nav navbar-nav">
<li class="">About</li> /*Just remove active class and add with js*/
<li>News</li>
<li>Intern</li>
<li>Form</li>
</ul>
.active{
background:black;
}
.active a{
color:#ffffff;
}

Answer 2

Use code as below:
DO NOT forget . before className in JQuery:
$('.nav .navbar-nav a') instaed $('nav navbar-nav a')
$('.navbar-nav li a').click(function(){
$(".navbar-nav li").removeClass("active");
$(this).parent().addClass("active");
});
.active{
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class = "navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Intern Web</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>News</li>
<li>Intern</li>
<li>Form</li>
</ul>

Answer 3

I Guess You are probably providing the wrong selector to jQuery
$('div.nav li a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active')
})
})
The Selectors
$("nav li a") or $(".navbar-nav li a")
Should work fine

Answer 4

Simply remove the active class on the li's on the click and then assign it to the li that was clicked:
$('.navbar-nav li').click(function(){
$('.navbar-nav li').removeClass('active');
$(this).addClass('active')
})
.navbar-nav li {
list-style: none;
display: inline;
padding: 5px 10px;
background: #d4d4d4;
}
.navbar-nav li a {
color: #222;
text-decoration: none;
}
.navbar-nav li.active {
background: black;
}
.navbar-nav li.active a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="active">About</li>
<li>News</li>
<li>Intern</li>
<li>Form</li>
</ul>