很棒的射流研究…选项卡切换效果

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

射流研究…选项卡切换代码：

！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='样式表type=' text/CSS ' href=' 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 dydiv class=' tab ' id=' tab ' H2 class=' tab-nav clear fix ' a href=' JavaScript :class='on '首页/aa href=' JavaScript :'技术/aa href=' JavaScript :'生活/aa href=' JavaScript :'作品/a/h2p类='选项卡-内容'首页首页首页首页首页首页首页首页首页首页/pp class='选项卡-内容隐藏'技术技术技术技术技术技术技术技术技术技术/pp class='选项卡-内容隐藏'生活生活生活生活生活生活生活生活生活生活/pp class='选项卡-内容隐藏'作品作品作品作品作品作品作品作品作品作品/p/div br/br/div class=' tab ' id=' tab S2 ' H2 class=' tab-nav clear fix ' a href=' JavaScript :'class=' on ' 11111/aa href=' JavaScript :'22222/aa href=' JavaScript :'33333/制表符(“tabs2”、“鼠标悬停”)；}/script /body/htmlTabs.js

函数选项卡(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=}}} base.css

@ charset“utf-8”；/*@名称： base@功能： 重设浏览器默认样式*//* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体*/html { color : black；背景：白色；}/* 内外边距通常让各个浏览器样式的表现位置不同*/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，average，details，figcaption，fig，fig，footer，header，hgroup，menu，nav，section { margin:0划水：0;}/* 要注意表单元素并不继承父级字体的问题*/body，button，input，select，textarea {font:12px SimSun，tahoma，arial，sans-serif；}输入，选择，文字面积{ font-size :100%；}/* 去掉各表格单元格的边距并让其边重合*/table {边框-折叠：折叠；边框间距：0;}/* IE bug修复第：次不继承text-align */th { text-align :继承；}/* 去除默认边框*/fieldset，img { border 3360 none }/* ie6 7 8(q)错误显示为行内表现*/iframe { display :块；}/* 去掉火狐浏览器下此元素的边框*/缩写，缩写{ border:none字体变量：正常；}/* 一致的倒三角形样式*/del { text-decoration : line-through；}地址、标题、引用、代码、dfn、em、th、var { font-style : normal；字体粗细：500；}/* 去掉列表前的标识，李会继承*/ol，ul { list-style : none；}/* 对齐是排版最重要的因素，别让什么都居中*/caption，th { text-align : left}/* 来自雅虎，让标题都自定义，适应多个系统应用*/h1、h2、h3、h4、h5、h6 { font-size :100%；字体粗细：500；} q :之前，q :之后{内容： }；}/* 统一上标和下标*/sub，sup { font-size :75%；线高：0;位置：相对；垂直对齐：基线；} sup { top :-0.5 em；} sub {底部：-0.25 em；}/* 让链接在盘旋状态下显示下划线*/a :悬停{ text-decoration :下划线；}/* 默认不显示下划线，保持页面简洁*/ins，a { text-decoration : none}/* IE6，7焦点点状线去除*/a:focus，* : focus { outline : none }/*清除浮动*/.clearfix:before。在{ content : }之前清除fix :display : table } . clear fix : after。在{ clear:both飞越：隐藏；}.clearfix { zoom:1/*适用于IE6 IE7 */} .清除{ clear:both显示：块；飞越：隐藏；高度：0;线高：0;字号：0；}/* 设置显示和隐藏，通常用来与射流研究…配合*/.隐藏{display:none！重要；可见性：隐藏；}.block {display:block！重要；}/* 设置内联，减少浮动带来的bug */.fl { float : leftisplay : inline }。fr { float : right display : inline }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。