<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>无标题页</title> <script src="js/jquery-1.2.3-intellisense.js" type="text/javascript"></script> 
<style type="text/css">
.menu{ margin:0; padding:0; border:0; width:300px;}
.menu.menu div{ width:300px; height:200px; border-color:Red; border-style:solid; border-width:1px; color:Red; float:left; display:none }.menu ul{ padding:0; margin:0; list-style-type:none; float:left;}.menu li{ width:70px; border-width:1px 1px 0px 1px; border-color:Red; border-style:solid; float:left;height:28px; margin-right:2px; text-align:center; line-height:28px; font-weight:bold;}</style> <script type="text/javascript" language="javascript">$(document).ready(function(){
$(".menu div:eq(0)").css("display","block")$("li:eq(0)").css("background","#eee")$("li").mouseover(function(index){$("li").css("color","");$(this).css("color","red")var tex=$(this);$(".menu div").css("dispaly","none");for(k=0;k<$(".menu li").length;k++){ if($(".menu li:eq("+k+")").text()==tex.text()) { $(".menu li").css("background",""); $(".menu li:eq("+k+")").css("background","#eee"); if(k<$(".menu div").length) { $(".menu div").css("display","none") $(".menu div:eq("+k+")").css("display","block")
} }}})})
</script></head><body><div class="menu"><ul><li>选项一</li><li>选项二</li><li>选项三</li><li>选项四</li></ul><div>我是选项一</div><div>我是选项二</div><div>我是选项三</div></div></body></html>