CODEWITHSUNDEEP
jquerycss
dimple
dimple

Reputation: 51

active pseudo class not working

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 "bye" the class of "Home" doesn't change back from home1 to home and its no longer clickable too.

php is as 

    <title>TEST</title>
<link href="css/test.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="text/jquery-1.10.2.min.js"></script>



 <script type="text/javascript">
    $("ul.nav li").click(function(e) {
   var newclass=($(this).attr("class")+"1");
   var oldclass=($(this).attr("class"));
   alert($(this).attr("class")+"1");
   $(this).attr( "class",newclass);

 });
</script>
</head>

    <body>
        <div class=sidebar>       
                    <ul id=nav>
                        <li class="home"><a href="index.php"> Home</a></li>
                        <li class="bye"><a href="bye.php"> Bye </a></li> 
                    </ul>
         </div>
     </body> 

    </html>

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;
    }

i have added jquery to the code but still no alert box or the desired result plz point me the mistake

u can see it in

plz help

Upvotes: 1

Views: 576

Answers (2)

Rishi Kulshreshtha
Rishi Kulshreshtha

Reputation: 1878

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!

Upvotes: 0

Lars Ebert-Harlaar
Lars Ebert-Harlaar

Reputation: 3537

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.

Upvotes: 1

Related Questions