标签：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
<title></title>
<style>
ul,li{ margin:0px; padding:0px;}
li{ list-style:none; float:left;}
.main{ width:408px; height:334px; position:relative;}
.nave li{ width:100px; height:30px; border:1px solid #000; cursor:pointer;}
.content li{ width:406px; height:300px; border:1px solid #000; position:absolute; top:32px; left:0px; }
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(‘.nave li‘).click(function(){
$(‘.content li‘).hide();
$(‘.content li‘).eq($(this).index()).show();//<找到content中跟所点击的类名相同的class予以显示，点击click可更换为鼠标移动mouseover>
});
});
</script>
</head>
<body>
<div class="main">
<ul class="nave">
<li class="list1" >显示1</li>
<li class="list2">显示2</li>
<li class="list3">显示3</li>
<li class="list4">显示4</li>
</ul>
<div>
</div>
<ul class="content">
<li class=" list1">111111111111111</li>
<li class=" list2" style=" display:none"><br>22222222222222</li>
<li class=" list3" style=" display:none"><br><br>33333333333333333</li>
<li class=" list4" style=" display:none"><br><br><br>4444444444444444</li>
</ul>
</div>
</body>
</html>
标签：
原文地址：http://my.oschina.net/ydsakyclguozi/blog/373104
