基于Jquery的内容显示模块

    最近在学习Jquery，看到好多网站的内容切换模块，也想用Jquery做一个。很简单。代码如下：
<!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 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>
    感觉jquery非常的方便，实现一些小功能很容易。
posted @ 2008-04-23 09:38  五味果  阅读(426)  评论(0)  编辑  收藏  举报