This is example http://jsfiddle.net/4BjVv/6/

$(function(){
    $('ul#crumbs li a').bind('click',crumbClick)
});

function crumbClick(){
    $('ul#crumbs .selected').removeClass('selected');
    $(this).parents('li').addClass('selected');
    return false;
}

The place and styling开发者_JAVA技巧 of The first item of list which is "Home" should be fixed

<ul id="crumbs">
   <li class="home"><a href="#">Home</a></li>
   <li class="selected"><a href="#">Javascript</a></li>
   <li><a href="#">Flash</a></li>
   <li><a href="#">SEO</a></li>   
</ul>

I want to keep first <li> static.

use :not()

$(function(){
    $('ul#crumbs li:not(.home) a').bind('click',crumbClick)
});

updated fiddle

based on comments below, it's just a matter of css styling...

change

ul#crumbs li.selected {float:left;}

to

ul#crumbs li.home,
ul#crumbs li.selected {float:left;}

Use the greater than selector:

$('ul#crumbs li:gt(0) a').bind('click',crumbClick);

Or alternatively, the not selector:

$('ul#crumbs li:not(.home) a').bind('click',crumbClick);