How to set class=“active” in jQuery | Code Factory

<body>
<div class="container">
<ul class="nav nav-tabs">
<li id="parentMenuId"><a href="#parentMenu">Parent Menu</a></li>
<li id="childMenuId"><a href="#childMenu">Child Menu</a></li>
</ul>
<div id="parentMenu">
<center>
<div class="form-group">
<h1>parent menu</h1>
</div>
</center>
</div>
<div id="childMenu">
<center>
<h1>child menu</h1>
</center>
</div>
</div>
</body>
<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.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script>
$(document).ready(function() {
$("#childMenu").hide();$("#parentMenuId").addClass("active");$("#parentMenuId").click(function() {
$("#parentMenu").show();
$("#childMenu").hide();
$("#parentMenuId").addClass("active");
$("#childMenuId").removeClass("active");
});
$("#childMenuId").click(function() {
$("#parentMenu").hide();
$("#childMenu").show();
$("#parentMenuId").removeClass("active");
$("#childMenuId").addClass("active");
});
});
</script>

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Code Factory

Code Factory

More from Medium

Seven(7) Github repositories to level up your JavaScript skills.

The first Step. An isLoading report of self taught software development.

How is a URL structured?

How to make your users spend more time on your website.

A fun 404 error page