代码相当简洁、简单易懂，就不多废话了。
直接奉上代码：
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<title>js简单选项卡</title>
<script type="text/javascript" src="js/demo.js"></script>
<style type="text/css">
*{ font-size: 14px;margin: 0px;}
a{color:#a0b3d6;text-decoration: none;}
.tabs{border:1px solid #a0b3d6;margin:100px;width:350px;}
.tabs-nav a{background:#eaf0fd; line-height:30px;padding:0px 20px 0px 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6; float:left;}
.tabs-nav .on{background:white; border-bottom:1px solid white; position:relative;}
.tabs-content{display: block; padding:20px;border-top:1px solid #a0b3d6; margin-top:-1px;}
.tabs-content_hide{display: none;}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<h2 class="tabs-nav clearfix">
<a href="javascript:;" class="on">首页</a>
<a href="javascript:;">技术</a>
<a href="javascript:;">生活</a>
<a href="javascript:;">作品</a>
</h2>
<div style="clear:both;"></div>
<p class="tabs-content">首页</p>
<p class="tabs-content_hide">技术</p>
<p class="tabs-content_hide">生活</p>
<p class="tabs-content_hide">作品</p>
</div>
</body>
<footer></footer>
新闻热点
疑难解答
图片精选
