Designing A Navigation using Jquery

Step 1)
Create a html page and name it as "test1.html"
here goes our code


<html>
<head>
<title>Example 1</title>
</head>
<body>
<ul id="navigation">
<li id="home"><a href="#">Home</a></li>
<li class="active"><a href="#">about us</a></li>
<li><a href="#">Our Vision</a></li>
<li><a href="#">Blogs</a></li>
</ul>
<div id="placeHolder">
<!-- our content displyed in this div area -->
</div>
<script src=js/jquery.min.js></"></script>
<script>
$(document).ready(function(){
$('#navigation li a').each(function(){
var $item = $(this);
$item.bind('click',function(event){
event.preventDefault();
var title = $item.html();
var html = title + ' was selected.';
$('#placeHolder').html(html);
});
});
});

Step 2) you need to get a Jquery file i.e., jquery.min.js you can download it from http://code.jquery.com/jquery-1.7.1.min.js and put it in "js" folder
<script src=js/jquery.min.js></"></script>

Demo Here