jQuery Style How to - Float left after clicking








Question

We would like to know how to float left after clicking.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<style type='text/css'>
ul#crumbs, ul#crumbs li {<!--from w  w  w. j a va  2s .c  om-->
  margin: 0;
  padding: 0;
}

ul#crumbs li a {
  display: inline-block;
  padding: 3px 4px;
}

ul#crumbs li {
  list-style: none;
  display: inline;
}

ul#crumbs li.selected {
  float: left;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
    $(function(){
        $('ul#crumbs li a').bind('click',crumbClick)
    });
    function crumbClick(){
        $('ul#crumbs .selected').removeClass('selected');
        $(this).parents('li').addClass('selected');
        return false;
    }
});
</script>
</head>
<body>
  <ul id="crumbs">
    <li><a href="#">XHTML</a></li>
    <li class="selected"><a href="#">Javascript</a></li>
    <li><a href="#">Flash</a></li>
    <li><a href="#">SEO</a></li>
  </ul>
</body>
</html>

The code above is rendered as follows: