使用javascript实现简单的选项卡切换
代码相当简洁、简单易懂，就不多废话了。
直接奉上代码：
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-type"content="text/html"charset="utf-8">
<title>js简单选项卡</title>
<scripttype="text/javascript"src="js/demo.js"></script>
<styletype="text/css"> *{font-size:14px;margin:0px;} a{color:#a0b3d6;text-decoration:none;} .tabs{border:1pxsolid#a0b3d6;margin:100px;width:350px;} .tabs-nava{background:#eaf0fd;line-height:30px;padding:0px20px0px20px;display:inline-block;border-right:1pxsolid#a0b3d6;border-bottom:1pxsolid#a0b3d6;float:left;} .tabs-nav.on{background:white;border-bottom:1pxsolidwhite;position:relative;} .tabs-content{display:block;padding:20px;border-top:1pxsolid#a0b3d6;margin-top:-1px;} .tabs-content_hide{display:none;} </style>
</head> <body> <divclass="tabs"id="tabs"> <h2class="tabs-navclearfix"> <ahref="javascript:;"class="on">首页</a> <ahref="javascript:;">技术</a> <ahref="javascript:;">生活</a> <ahref="javascript:;">作品</a> </h2> <divstyle="clear:both;"></div> <pclass="tabs-content">首页</p> <pclass="tabs-content_hide">技术</p> <pclass="tabs-content_hide">生活</p> <pclass="tabs-content_hide">作品</p> </div> </body> <footer></footer> </html>