hi all
i have this below code that is adding and removing class=“activelink” on click.
i want to keep first link active by default on page load.
then onclick of second link the first link should become inactive.
but in this below code both first and second remain active.
how can i remove the activelink class of fist link on click of second link or third link.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.activelink{color:#FFFFFF; background-color:#FF0000; padding:8px;}
</style>
</head>
<body>
<ul>
<li><a href="#" class="activelink">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
<script src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var selector = 'ul li';
$(selector).on('click', function(){
$(selector).removeClass('activelink');
$(this).addClass('activelink');
});
</script>
</body>
</html>
vineet