【javascript】tabs选项卡切换效果
<div id="cnblogs_post_body">现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。效果图如下：
http://images.cnitblog.com/blog/463154/201212/28165408-52ad1eb1f5354f08a531cbcca23835ff.png
html 代码：
<div class="cnblogs_code"><!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>css-margin-used-in-tabs</title> <link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/> <style type="text/css"> a{color:#a0b3d6;} .tabs{border:1px solid #a0b3d6;margin:100px;width:300px;} .tabs-nav a{background:#eaf0fd;line-height:30px;padding:0 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;} .tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;} </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> <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></html><script type="text/javascript" src="tabs.js"></script><script type="text/javascript">window.onload = function(){ tabs();}</script>
页:
[1]