<style type="text/css">
*{padding:0px;margin:0px;}
#nav{display:block;}
.clear{clear:both;}
ul li{list-style:none;
float:left;
margin:0 5px;
width:100px;
}
#content div{
display:none;
width:300px;
height:100px;
background:#eee;
}
#content div.cur{
display:block;
}
#nav .cur a{
color:#f00;
}
</style>
$("document").ready(function(){
$("#nav li").click(function(){
var i=$(this).attr('date-i')
$("#nav li").removeClass('cur');
$(this).addClass('cur');
$("#content div").removeClass('cur');
$("#a_"+i).addClass('cur');
})
})
<body>
<ul id="nav">
<li class="cur" data-i='1'><a href="javascript:void(0);">jquery</a></li>
<li data-i='2'><a href="javascript:void(0);">js</a></li>
<li data-i='3'><a href="javascript:void(0);">linus</a></li>
</ul>
<div class="clear"></div>
<div id="content">
<div id="a_1" class="cur">jquery</div>
<div id="a_2">js</div>
<div id="a_3">linus</div>
</div>
</body>