网页选项卡的应用
在页面中，设置三个不同名称的选项卡，当点击选显卡的时候，下面对应的区域显示器内容信息，同时选项卡的背景色与内容信息的背景色浑然一体，并且字体加粗，表示处于选中状态。
以下为实现代码：
<!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 type="text/javascript" src="Jscript/jquery-1.4.2-vsdoc.js"> </script> <script type="text/javascript" src="Jscript/jquery-1.4.2.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:5px; margin-right:2px;width:50px;cursor:pointer} #menu li.tabFocus {width:50px; font-weight:bold; background-color:#f3f2e7;border:solid 1px #666; border-bottom:0;z-index:100;position:relative} #content {width:260px;height:80px;padding:10px; background-color:#f3f2e7;clear:left; border:solid 1px #666;position:relative;top:-1px} #content li{display:none} #content li.conFocus{display:block} </style> <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> </html>
