网页选项卡的应用
<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="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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
