<li> problem

Hi, I have 3 <li> inside the <ul>,everytime i clicked i want to put a class name


   $(function(){

           $('#li-one').click(function(event){
               event.preventDefault();

               $('#li-one').addClass('colorstyle').closest('li').nextAll('.selected').removeClass();


               $('.content').load('add.php');

           })

        });


$(function(){

           $('#li-two').click(function(event){
               event.preventDefault();

               $('#li-two').addClass('colorstyle').closest('li').nextAll('.selected').removeClass();


               $('.content').load('add.php');

           })

        });

$(function(){

           $('#li-three').click(function(event){
               event.preventDefault();

               $('#li-three').addClass('colorstyle').closest('li').nextAll('.selected').removeClass();


               $('.content').load('add.php');

           })

        });


what i want is that if i am going to click li-two the li-one should remove the class name which is .colorstyle,but my code is not working.

Thank you in advance.

Looks like this works. Not my fiddle http://jsfiddle.net/35QaP/

Hi EricWatson, Works great thank you. :slight_smile: