标签：
<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>
标签：
原文地址：http://www.cnblogs.com/helinfeng/p/4626805.html
