首页 > 代码库 > 网页选项卡的应用
网页选项卡的应用
<title>无标题文档</title>
<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:5px; margin-right:2px; width:50px; cursor:pointer;}
#menu li.tabFocus{ width:50px; font-weight:bold; background-color:#f3f2e7; border:1px solid #666; border-bottom:0; z-index:100; position:relative;}
#content{ width:260px; height:80px; padding:10px; background:#f3f4e7; clear:left; border:1px solid #666; position:relative; top:-1px;}
#content li{ display:none;}
#content li.conFocus{ display:block;}
</style>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.3.js"></script>
<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>
</head>
<body>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">我是家居的内容</li>
<li>欢迎来到电器城！</li>
<li>二手市场，产品丰富多彩</li>
</ul>
</body>