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

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>

--

--

No responses yet