<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Navigation Bar</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
h1
style
=
"color:green;text-align:center;"
>
GeeksforGeeks
</
h1
>
<
h2
style
=
"text-align:center;"
>Collapsing Navbar</
h2
>
<
nav
class
=
"navbar navbar-expand-sm bg-success navbar-light"
>
<
a
class
=
"navbar-brand"
href
=
"#"
>
<
img
src
=
alt
=
"logo"
style
=
"width:40px;"
>
</
a
>
<
button
class
=
"navbar-toggler"
type
=
"button"
data-toggle
=
"collapse"
data-target
=
"#collapse_Navbar"
>
<
span
class
=
"navbar-toggler-icon"
></
span
>
</
button
>
<
div
class
=
"collapse navbar-collapse"
id
=
"collapse_Navbar"
>
<
ul
class
=
"navbar-nav"
>
<
li
class
=
"nav-item active"
>
<
a
class
=
"nav-link"
data-toggle
=
"tab"
href
=
"#home"
>
Home
</
a
>
</
li
>
<
li
class
=
"nav-item"
>
<
a
class
=
"nav-link"
data-toggle
=
"tab"
href
=
"#algo"
>
Algo
</
a
>
</
li
>
<
li
class
=
"nav-item"
>
<
a
class
=
"nav-link"
data-toggle
=
"tab"
href
=
"#ds"
>
DS
</
a
>
</
li
>
<
li
class
=
"nav-item"
>
<
a
class
=
"nav-link"
data-toggle
=
"tab"
href
=
"#lang"
>
Languages
</
a
>
</
li
>
</
ul
>
</
div
>
</
nav
>
</
div
>
<
div
class
=
"tab-content"
>
<
div
class
=
"tab-pane"
id
=
"home"
role
=
"tabpanel"
>A</
div
>
<
div
class
=
"tab-pane"
id
=
"algo"
role
=
"tabpanel"
>B</
div
>
<
div
class
=
"tab-pane"
id
=
"ds"
role
=
"tabpanel"
>C</
div
>
<
div
class
=
"tab-pane"
id
=
"lang"
role
=
"tabpanel"
>D</
div
>
</
div
>
<
script
>
$(document).on('click', '.nav-link.active', function() {
var href = $(this).attr('href').substring(1);
//alert(href);
$(this).removeClass('active');
$('.tab-pane[id="' + href + '"]').removeClass('active');
});
$(document).mouseup(function(e) {
var container = $("#tablist"); // target ID or class
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0) {
// get Event here
$('.active').removeClass('active');
}
});
</
script
>
</
body
>
</
html
>