<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>
Bootstrap Navbar Change
Active Class Link
</
title
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
'stylesheet'
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
body {
margin: 20px;
}
#topheader .navbar-nav li > a {
text-transform: capitalize;
color: #333;
-webkit-transition: background-color .2s, color .2s;
transition: background-color .2s, color .2s;
}
#topheader .navbar-nav li > a:hover,
#topheader .navbar-nav li > a:focus {
background-color: #005596;
color: #fff;
}
#topheader .navbar-nav li.active > a {
background-color: #3990E0;
color: white;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"topheader"
>
<
nav
class
=
"navbar navbar-default"
>
<
div
class
=
"container-fluid"
>
<
div
class
=
"navbar-header"
>
<
a
class
=
"navbar-brand"
href
=
"#"
style
=
"color: green;"
>
GeeksforGeeks
</
a
>
</
div
>
<
div
class
=
"collapse navbar-collapse"
id
=
"bs-example-navbar-collapse-1"
>
<
ul
class
=
"nav navbar-nav"
>
<
li
class
=
"active"
>
<
a
href
=
"#home"
>home</
a
>
</
li
>
<
li
>
<
a
href
=
"#page1"
>HTML</
a
>
</
li
>
<
li
>
<
a
href
=
"#page2"
>CSS</
a
>
</
li
>
<
li
>
<
a
href
=
"#page3"
>JavaScript</
a
>
</
li
>
</
ul
>
<
ul
class
=
"nav navbar-nav navbar-right"
>
<
li
>
<
a
href
=
"#"
>Front-End</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
</
nav
>
</
div
>
<
script
>
$( '#topheader .navbar-nav a' ).on('click',
function () {
$( '#topheader .navbar-nav' ).find( 'li.active' )
.removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
});
</
script
>
</
body
>
</
html
>