一闪一闪
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css">* {margin: 0px;padding: 0px;font: 12px normal "microsoft yahei";}/* CSS样式制作 */ a {text-decoration: none;color: #000;}div[name="tabmain"]>ul>li {display: inline-block;line-height: 35px;height: 35px;}ul[id="tabul"]{display:inline;}ul[id="tabul"]>li {text-align: center;width: 70px;height: 30px;line-height: 30px;display: inline-block;margin-right: 5px;border-top:2px solid #999;border-left:2px solid #999;border-right:2px solid #999;background:#FFF;}div[id="tab"]{position:absolute;top:0px;left:10px;z-index:1;}div[name="tabmain"] {position:absolute;top:27px;padding: 20px;height: 200px;width: 350px;background:#FFF;margin-bottom: 50px;border-top: 5px solid #F93;border-bottom:1px solid #00F;border-left:1px solid #00F;border-right:1px solid #00F}div[id="main"]{height:273px;width:392px;position:fixed;top:40px;left:50px;}</style> <script type="text/javascript"> // JS实现选项卡切换 window.onload=function(){var tabs=document.getElementById("tabul").getElementsByTagName("li");for(var i=0;i<tabs.length;i++){}} </script> </head> <body><!-- HTML页面布局 --><div id="main"><div id="tab"><ul id="tabul"><li><a href="#">房产</a></li><li><a href="#">家居</a></li><li><a href="#">二手房</a></li></ul></div><div id="tabmain" name="tabmain"></div></div></body></html>