Jquery网页选项卡

来源：互联网发布：网络签约作家编辑：程序博客网时间：2024/05/19 12:23

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>第一个简单的jQuery程序</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>


<style type="text/css">
body{font-size:13px}
ul,li{margin:0;padding:0;list-style:none}
#menu li{text-align:center;float:left;padding:3px;
margin-right:2px;width:50px;cursor:pointer}

#menu li.tabFocus{width:50px;font-weight:bold;
background-color:#f3f2e3;border:solid 1px #666;
border-bottom:0;z-index:100;
position:relative}

#content{width:260px;height:80px;padding:10px;
background-color:#f3f4e4;clear:left;
border:solid 1px #666;
position:relative;top:-1px}

#content li{display:none}
#content li.conFocus{display:block}
</style>

</head>
<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>

<ul id="content">
<li class="conFocus">我的家居生活</li>
<li>123电器</li>
<li>1233二手</li>
</ul>

</body>
<script type="text/javascript">
$(function()
{
$("#menu li").each(function(index)
{
$(this).click(function()
{
$("#menu li.tabFocus").removeClass("tabFocus");
$(this).addClass("tabFocus");

$("#content li:eq("+index+")").show().siblings().hide(); //显示本项，隐藏它的兄弟项
});
});



});

</script>

</html>

0 0