基于Jquery的内容显示模块

最近在学习Jquery，看到好多网站的内容切换模块，也想用Jquery做一个。很简单。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

.menu{ margin:0; padding:0; border:0; width:300px;}

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

$(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>我是选项一</div>

<div>我是选项二</div>

<div>我是选项三</div>

</div>

</body>

</html>

感觉jquery非常的方便，实现一些小功能很容易。