javascript实现制表符选项卡切换效果（自写原生js)

现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生爪哇岛描述语言写的选项卡切换效果，由于本人水平有限，如有问题请指出。效果图如下

超文本标记语言代码：复制代码代码如下：' DOCTYPE HTML HTML lang=' en-US ' head meta charset=' UTF-8 ' title js-tab/title link rel='样式表type=' text/CSS ' href=' CSS/base。CSS ' media=' all '/style type=' text/CSS ' a { color : # a03b D6；} .制表符{border:1px实线# a03b D6；余量：100px宽度宽度：300px}。选项卡-nav a {背景： # EAF 0fd线高：30 pxpadding:0 20pxdisplay :内嵌块；右边框：1px实心# a03b D6；边框-底部：1px实心# a0b3d6float:left}。标签导航。在{ background : white border-bottom :1 px纯白色；_ position:relative}。选项卡-内容{ padd :20 pxborder-top :1 px实心# a0b3 d6margin-top :-1px；}/style/head body div class=' tab ' id=' tab ' H2 class=' tab-nav clear fix ' a href=' JavaScript :'class='on '首页/a a href=' JAVAScript :'技术/a a href=' JAVAScript :'生活/a a href=' JAVAScript :'作品/a /h2 p类='选项卡-内容'首页首页首页首页首页首页首页首页首页首页/p p class='制表符-内容隐藏'技术技术技术技术技术技术技术技术技术技术/p p class='制表符-内容隐藏'生活生活生活生活生活生活生活生活生活生活/p p class='制表符-内容隐藏'作品作品作品作品作品作品作品作品作品作品/p/div br/br/div class=' tab ' id=' tab S2 ' H2 class=' tab-nav clear fix ' a href=' JavaScript :'class=' on ' 11111/a href=' JavaScript :'22222/a a href=' JavaScript :'33333/制表符(“tabs2”、“鼠标悬停”)；}/脚本其中base.css参考我的半铸钢钢性铸铁(铸造半钢)框架——base.css。爪哇岛描述语言代码：复制代码代码如下：函数选项卡(id，trigger){ var tabstn=document。getelementbyid(id ).getElementsByTagName(' H2 '[0]).getElementsByTagName(' a ')；var tabsContent=document。getelementbyid(id ).getElementsByTagName(' p ')；for(var i=0，len=tabsBtn.length我透镜；I){ tabstn[I].索引=我；if(trigger==' click '){ tabstn[I].onclick=function(){ clearClass()；显示内容(这。索引)；} } else if(trigger=='鼠标悬停'){ Tabsbtn[I].onmouseover=function(){ clearClass()；显示内容(这。索引)；} } }函数showContent(n){ for(var i=0，len=tabsBtn.length我透镜；i ){ tabsContent[i].隐藏}选项卡内容[n].' className='制表符-内容；}函数clearClass(){ for(var i=0，len=tabsBtn.length我透镜；I){ tabstn[I].className=} } }注意： 1、标题如首页、技术、生活和作品是在氘标签中。 2、显示当前标题使用班级名为在的类，如果修改成其他班级的如选中的，就需要修改tabs.js中相对应的内容。 3、标题所对应的内容是在p标签中p。标签中不能再有p标签PS:这是本人闲着无聊，通过自己所学的爪哇岛描述语言知识，随意写的一些效果。