很棒的js选项卡切换效果

很棒的JavaScript选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现简单的选项卡切换效果的具体代码，供大家参考，具体内容如下

js选项卡切换代码：

    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;}   
首页首页首页首页首页首页首页首页首页首页
技术技术技术技术技术技术技术技术技术技术
生活生活生活生活生活生活生活生活生活生活
作品作品作品作品作品作品作品作品作品作品


 
11111111111111111111111111111111111
222222222222222222222222222222222222
333333333333333333333333333333333333333

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选项卡切换效果的详细内容，更多请关注本站其它相关文章！