javascript切换标签的两个例子

标签交换的四种不同实现原理在之前的文章《javascript实现tab切换的四种方法》中已经描述过了，所以现在是时候将理论与实践相结合了。这里有一些例子。

1.模仿中国人民大学官网的tab键切换。背景为图片，渲染如下：

鼠标移动到新闻时的效果。

鼠标移动到公告时的效果。

鼠标移动进行交流时的效果。

学术、交流、文体内容都是空白，所以没有写。完整的代码如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style * { padd : 0；margin : 0；} body {font-family : arial，verdana，sans-serif，' verdana '；} Li { list-style : none；float:left} a { text-decoration : none；color: # ffeec6} # Tancontainer { height : 210 px；宽度： 470 px；background : URL(home info-trans-BG . png)；飞越：隐藏；color: # ffeec6} #tanContainer阿利{ height: 25pxdisplay:内联块；左边距left: 18pxfont-size : 12px；padding-top : 12px；边距-bottom : 15px；} ul Li a . fli { } # Tabone { width : 122 px；opa city 3360 0；} # TabTwo { padding-left : 102 px；} #tabCon { clear:双双；} # tabCon p a { color: # FFF2D5} div div p { font-size : 12px；margin: 10px 0 0 20px宽度： 440 px；} # BigPara { font-size : 16px；color: # FFF2D5边框-bottom: 1px虚线# FFF2D5衬垫-bottom : 5px；} # tabCon div { display:none} # Tabcon div . fdiv { display : block；}/style/head body div id=' tancontainer ' div id=' tab ' ullia class=' fli ' href=' # ' id=' tabone ' news/a/li lia href='# ' id=' tabTwo '公告/A/Li lia href=' # '学术/A/Li lia href=' # ' exchange/A/Li lia href=' # ' style/A/Li/ul/div id=' tabcon ' div=' fdiv ' p id=' big para ' A href.中国人民大学开展特殊教育，弘扬焦精神，践行“三严三实”(2015-10-25)；”中国人民大学开展特殊教育，弘扬焦精神，践行“三严三实”(2015-10-25)/a/p pa href='#。中国人民大学认真落实党风廉政建设主体责任和监督责任(2015年10月23日)/A/P PA href=' # '中国人民大学第四届体育文化节开幕在2015年新生运动会上举行(2015年10月18日)/A/P PA href=' # '中国人民大学一带一路经济研究院首席顾问聘任仪式在土库曼斯坦举行。2015-2016学年第一学期第八周安排在校领导接待日.(2015-10-22)/a/p pa关于举办中国人民大学第二届青年管理干部岗位技能竞赛.(2015-09-30)/a/p pa中国高校第十六届视频公开课启动。请注意.(2015-10-26)/a/p pa关于组织我校青年教师参观鲁迅博物馆社会实践活动的通知.(2015-10-23)/a/p pa关于举办中国人民大学第四届职工羽毛球“1 1”团体赛的通知.(2015-10-23).中国人民大学MOOCs课程录播室设备采购项目中标.(2015-10-23)/a/p /div内容3 /div内容4 /div内容5/div/div/div/body脚本vartab=document . getelementbyid(' tab ')。getelementbytanname('。var divs=document . getelementbyid(' tabCon ')。getElementsByTagName(' div ')；for(var I=0；itabs.lengthI){ tab[I]。onmouseover=function(){ change(this)；} }函数更改(obj){ for(var I=0；itabs.lengthI){ if(tab[I]==obj){ tab[I]。类名=' flidivs[i]。className=' fdivif(I==0){ document . getelementbyid(' tanContainer '). style . background position=' 0 0 ' } else { document . getelementbyid(' tanContainer '). style . background position=' 0-210 px ' } } else { tab[I]。className=divs[i]。className=} } }/script/html html这个例子是一个非常简单和常见的tab开关。js中还有一件事就是改变背景图片的位置，其他的都是简单的样式。

二、用输入：已检查来实现标签切换效果，现在就用此原理加上css3做一个漂亮的实例，在切换的时候，内容区是渐现的。效果图如下：

鼠标点击HTML/CSS时的效果

鼠标点击创建交互式、快速动态网页应用的网页开发技术时的效果

完整代码如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；选中charset=utf-8 '/title输入：实现标签切换/title样式。制表符{ color : # FFF；字体系列： '微软雅黑；}输入{ opa city 3360 0；/*隐藏投入的选择框*/}输入：选中的标签{填充-底部： 6px字体粗细：粗体；}标签cursor:指针；/*鼠标移上去变成手状*/float:左侧；宽度： 120像素；线高： 40px右边距： 5px文本对齐：中心；} .标签为：的标签类型(1){背景： # 5eb 0de} .标签为：的标签类型(2){背景： # 86 cad7} .标签为：的标签类型(3){背景： # e9 Bab 3；} .标签为：的标签类型(4){背景： # a8c 194} label :悬停{ font-weight : bold；} /*选择前面有。制表符输入：第类：个选中的面板。第：个面板-儿童(x)*/.制表符输入：第(1)种类型：选中~。面板。面板： th-child(1){ opa city 3360 1；背景# 5eb 0de-网络套件-transit :3s；} .制表符输入：第(2)种类型：选中~。面板。面板： th-child(2){ opa city 3360 1；背景技术# 86 cad7-网络套件-transit :3s；} .制表符输入：第(3)种类型：选中~。面板。面板： th-child(3){ opa city 3360 1；背景技术# e9 Bab 3-网络套件-transit :3s；} .制表符输入：第(4)种类型：选中~。面板。面板： th-child(4){ opa city 3360 1；背景技术# a8c 194-网络套件-transit :3s；} .面板{ opa city 3360 0；绝对位置：/*使内容区域位置一样*/高度： 200 px宽度： 455像素；边距-top : 25px；padd : 0 20px }/style/head body div class=' tab ' input checked id=' one ' name=' tab ' type=' radio ' label for=' one ' html/CSS/label input id=' two ' name=' tab ' type=' radio ' label for=' two ' JavaScript/label input id=' three ' name=' tab ' type=' radio ' label for=' three ' AJAX/label input id=' four ' name=' tab ' type=' radio '标签为=' four ' sever ' Side/label div class='文本标签语言/h2 pHTML是通向网技术世界的钥匙HTML。 非常容易学习！你会喜欢它的！/p/div div class=' panel ' H2JavaScript脚本语言/h2 pJavaScript是世界上最流行的脚本语言br/JavaScript是属于网的语言，它适用于个人电脑、笔记本电脑、平板电脑和移动电话br/JavaScript被设计为向超文本标记语言页面增加交互性/p /div div class='panel' h2AJAX阿贾克斯/h2 pAJAX=异步Java Script语言和XML(异步的Java脚本语言和XML)。br/AJAX不是新的编程语言，而是一种使用现有标准的新方法br/AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下H2/服务器端服务器脚本/h2 pSQL是用于访问和处理数据库的标准的计算机语言br/ASP是创建动态交互性网页的强大工具br/ADO指微软倡导的微软倡导的ActiveX网络化多媒体对象技术网络化多媒体对象技术数据对象(ActiveX数据对象).br/PHP是一种创建动态交互性站点的强有力的服务器端脚本语言br/VBScript是微软公司出品的脚本语言/p/div/div/body/html