<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> |