This post is used to set the css active class for links on click the particular link. This is very useful for one page website to change the active class for the particular section on click the corresponding link.
Javascript and Jquery is used to make this types of concept simple manner. Just it set the css active class on click and remove the class when click the other link. This type of small concept is used to for scrolling websites. This is simple but i hope it is useful some certain cases in website.
Javascript and Jquery is used to make this types of concept simple manner. Just it set the css active class on click and remove the class when click the other link. This type of small concept is used to for scrolling websites. This is simple but i hope it is useful some certain cases in website.
Set and Remove the active class using jquery:
<html>
<head>
<title>set active class for links on click change the active class</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style>
.nav { color: green; }
.selected { color: red; }
.san ul li{
float:left;
margin-right: 25px;
}
</style>
</head>
<body>
<div class="san">
<ul id="navlist">
<li><a class="nav" href="">Home</a></li>
<li><a class="nav" href="">About Us</a></li>
<li><a class="nav" href="">Services</a></li>
<li><a class="nav" href="">Contact</a></li>
</ul>
</div>
<script>
$('#navlist a').click(function(e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$(this).addClass('selected');
});
</script>
</body>
</html>
<head>
<title>set active class for links on click change the active class</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style>
.nav { color: green; }
.selected { color: red; }
.san ul li{
float:left;
margin-right: 25px;
}
</style>
</head>
<body>
<div class="san">
<ul id="navlist">
<li><a class="nav" href="">Home</a></li>
<li><a class="nav" href="">About Us</a></li>
<li><a class="nav" href="">Services</a></li>
<li><a class="nav" href="">Contact</a></li>
</ul>
</div>
<script>
$('#navlist a').click(function(e) {
e.preventDefault(); //prevent the link from being followed
$('#navlist a').removeClass('selected');
$(this).addClass('selected');
});
</script>
</body>
</html>
0 Comments