active pseudo class not working

Question

when i click on the link \"home\" class home should change and stay at class home1 till another link is clicked but it doesn\'t...class changes but on clicking the other link

Answer 1

The :active-state is only active while you hold down the mouse-button on the link! It is not active until you click another link! This could be done with jQuery:

$('a').click(function() {
    $('a.lastClickedLink').removeClass('lastClickedLink');
    $(this).addClass('.lastClickedLink');
});

The link that was clicked last will have the class lastClickedLink and can then be styled through css with a.lastClickedLink {}.

If you want this class to be persistent when the user comes back to the page later, you will have to use a cookie. Use jQuery cookie for this.

Answer 2

Are you trying to achieve this?

<!-- The CSS Section -->
<style type="text/css">
body {
  width:1020px;
  margin:0 auto;
  position:absolute;
}
.sidebar {
  margin-left:10px;
}
.nav {
  display:block;
  margin-top:60px;
}
ul {
  list-style-type:none;
}
a {
  text-decoration:none;
  border:none;
}
li.home {
  background: $666 no-repeat;
  width:150px;
  height:65px;
  color:#fff;
}
li.bye {
  background: $666 no-repeat;
  width:150px;
  height:65px;
  color:#fff;
}
li.home:hover {
  background: #678fef no-repeat;
  color:#fff;
}
li.bye:hover {
  background: #678fef no-repeat;
  color:#fff;
}
li.home1 {
  background: #678fef no-repeat;
  color:#fff;
}
li.bye1 {
  background: #678fef no-repeat;
  color:#fff;
}
</style>

<!-- Importing jQuery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<!-- Applying Custom JS Functions -->
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $("ul#nav li a").click(function (e) {
        var newClass = ($(this).parent().attr('class') + 1);
        var oldClass = ($(this).parent().attr('class'));
        alert(newClass);
        $(this).parent().attr('class', newClass)
    });
});
</script>

<!-- The HTML Section -->
<div class="sidebar">
    <ul id="nav">
        <li class="home"><a href="#"> Home</a></li>
        <li class="bye"><a href="#"> Bye </a></li>
    </ul>
</div>

Or simply test it on this fiddle http://jsfiddle.net/FHsvj/

Cheers!