<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$(".content div").hide();
$("li").hover(function() {
$(this).toggleClass(‘hover‘);
$(".content").find("div").eq($(this).index()).show();
}, function() {
$(this).toggleClass(‘hover‘);
$(".content").find("div").eq($(this).index()).hide();
});
$(".content div").hover(function() {
$(this).show();
}, function() {
$(this).hide();
});
})
</script>
<style>
*{margin:0;padding:0;}
body{padding:20px;}
ul{float:left;}
li{margin-bottom:20px;padding:20px;width:150px;height:10px;border:1px solid #ccc;}
.content{float:left;}
.content div{padding:20px;width:800px;height:200px;border:1px solid #ccc;}
.hover{background:#ff6699;}
</style>
</head>
<body>
<ul>
<li><span>我是li 1</span></li>
<li><span>我是li 2</span></li>
<li><span>我是li 3</span></li>
</ul>
<div class="content">
<div>我是我是li 1的div</div>
<div>我是我是li 2的div</div>
<div>我是我是li 3的div</div>
</div>
</body>
</html>
时间： 2024-10-09 03:36:59