Remove default active class

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

It’s the links that get the class, not the li’s. This should work.

var links = $('ul a');
links.on('click', function() {
  links.removeClass('activelink');
  $(this).addClass('activelink');
});

Thanks markbrown4

its working fine now

vineet

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.