How to set class=“active” in jQuery | Code Factory
1 min readDec 1, 2019
Reference Link : Link
<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>