How to set class=“active” in jQuery
File : HTML file
<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>
File : Scripting file
<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>
Comments
Post a Comment