本文实例为大家分享了js实现简单的选项卡切换效果的具体代码，供大家参考，具体内容如下
js选项卡切换代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <link rel="stylesheet" type="text/css" href="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;_position:relative;} .tabs-content{padding:20px;border-top:1px solid #a0b3d6;margin-top:-1px;} </style> </head> <body> <div id="tabs"> <h2> <a href="javascript:;">首页</a> <a href="javascript:;">技术</a> <a href="javascript:;">生活</a> <a href="javascript:;">作品</a> </h2> <p>首页首页首页首页首页首页首页首页首页首页</p> <p>技术技术技术技术技术技术技术技术技术技术</p> <p>生活生活生活生活生活生活生活生活生活生活</p> <p>作品作品作品作品作品作品作品作品作品作品</p> </div> <br/><br/> <div id="tabs2"> <h2> <a href="javascript:;">11111</a> <a href="javascript:;">22222</a> <a href="javascript:;">33333</a> </h2> <p>11111111111111111111111111111111111</p> <p>222222222222222222222222222222222222</p> <p>333333333333333333333333333333333333333</p> </div> </body> </html> <script type="text/javascript" src="tabs.js"></script> <script type="text/javascript"> window.onload = function(){ tabs('tabs','click'); tabs('tabs2','mouseover'); } </script> </body> </html>
Tabs.js
function tabs(id,trigger){ var tabsBtn = document.getElementById(id).getElementsByTagName('h2')[0].getElementsByTagName('a'); var tabsContent = document.getElementById(id).getElementsByTagName('p'); for(var i = 0,len = tabsBtn.length; i < len; i++){ tabsBtn[i].index = i; if(trigger == 'click'){ tabsBtn[i].onclick = function(){ clearClass(); this.className = 'on'; showContent(this.index); } }else if(trigger == 'mouseover'){ tabsBtn[i].onmouseover = function(){ clearClass(); this.className = 'on'; showContent(this.index); } } } function showContent(n){ for(var i = 0,len = tabsBtn.length; i < len; i++){ tabsContent[i].className = 'hide'; } tabsContent[n].className = 'tabs-content'; } function clearClass(){ for(var i = 0,len = tabsBtn.length; i < len; i++){ tabsBtn[i].className = ''; } } }
base.css
@charset "utf-8"; /* @名称: base @功能: 重设浏览器默认样式 */ /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */ html { color:black; background:white; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0; padding:0; } /* 要注意表单元素并不继承父级 font 的问题 */ body,button,input,select,textarea { font:12px SimSun,tahoma,arial,sans-serif; } input,select,textarea { font-size:100%; } /* 去掉各Table cell 的边距并让其边重合 */ table { border-collapse:collapse; border-spacing:0; } /* IE bug fixed: th 不继承 text-align*/ th { text-align:inherit; } /* 去除默认边框 */ fieldset,img { border:none; } /* ie6 7 8(q) bug 显示为行内表现 */ iframe { display:block; } /* 去掉 firefox 下此元素的边框 */ abbr,acronym { border:none; font-variant:normal; } /* 一致的 del 样式 */ del { text-decoration:line-through; } address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:500; } /* 去掉列表前的标识, li 会继承 */ ol,ul { list-style:none; } /* 对齐是排版最重要的因素, 别让什么都居中 */ caption,th { text-align:left; } /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:500; } q:before,q:after { content:''; } /* 统一上标和下标 */ sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup { top:-0.5em; } sub { bottom:-0.25em; } /* 让链接在 hover 状态下显示下划线 */ a:hover { text-decoration:underline; } /* 默认不显示下划线，保持页面简洁 */ ins,a { text-decoration:none; } /* IE6,7焦点点状线去除 */ a:focus,*:focus { outline:none; } /* 清除浮动 */ .clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; overflow:hidden; } .clearfix { zoom:1; /* for IE6 IE7 */ } .clear{ clear:both; display:block; overflow:hidden; height:0; line-height:0; font-size:0; } /* 设置显示和隐藏, 通常用来与 JS 配合 */ .hide { display:none !important; visibility:hidden; } .block { display:block !important; } /* 设置内联, 减少浮动带来的bug */ .fl { float:left; display:inline; } .fr { float:right; display:inline; }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【很棒的js选项卡切换效果】相关文章：
★ 载入进度条 效果
★ jquery插件splitScren实现页面分屏切换模板特效