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


Donate : Link

Medium Blog : Link

Applications : 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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s