这是一款基于射流研究…实现的标签标签切换效果，是一款无需jQuery，原生爪哇岛描述语言制作的标签切换效果源码。点击上面的标题即可实现对应页面的切换功能，非常具有实用价值。运行效果图： - 查看效果下载源码-

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的射流研究…实现的标签标签切换效果代码如下

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejs实现标签标签切换效果/title style * { margin 33600；划水：0;列表式：无；}正文{ font-size :12 px} #菜单{ width:360px飞越：隐藏；margin :100 px auto order :1 px固体# BF9660} #菜单#导航{ display:block宽度：100%;划水：0;margin:0list列表式：无；} #菜单# nav li { float:left宽度宽度：120px} #菜单#导航阿利{显示：块线高：27 px文本装饰：无；padding:0 0 0 5px文本对齐：居中；color : # 333 } # menu _ con { width :358 pxhright :135 pxborder-top : none } .标记{ padding:10px飞越：隐藏；}.选中{ background : # c5a 069 color : # fff }/style/head dy！-代码部分begin - div id='menu '！标签标题-ul id=' nav ' lia href=' # ' class=' selected ' jquery特效/a/li lia选项卡切换/a/li lia href='#' class=' '菜单导航/a/li /ul！-二级菜单-div id=' menu _ con ' div class=' tag ' style=' display : block '这里是jQuery特效内容列表/div div class=' tag ' style=' display : none '这里是标签切换效果/div div class=' tag ' style=' display : none '这里是菜单导航效果/div/div/div脚本var tab=function(){ function tag(name，elem){ return(elem | | document)} .getElementsByTagName(名称);} //获得相应身份的元素函数id(名称){返回document.getElementById(名称);}函数优先(elem){ elem=elem。第一个孩子；return elemelem.nodeType==1？elem : next(elem)；}函数next(elem){ do { elem=elem。下一个兄弟姐妹；}while(elemelem.nodeType！=1)返回elem}返回{ set:function(elemId，tabId){ var elem=tag('li '，id(ElEMid))；var tab=tag(' div '，id(taBid))；var listNum=elem . length var tabNum=tab . length for(var I=0；ilistNumi ){ elem[i].onclick=(函数(I){ return function(){ for(var j=0；jtabNumj){ if(I==j){ tab[j]。风格。display=' block//alert(elem[j]).第一个孩子)；elem[j]。第一个孩子。类名=“选定”；} else { tab[j]。风格。显示='无'；elem[j]。第一个孩子。类名=' '；} } } })(I)} } } } } })；选项卡。set(' nav '，' menu _ con ')；//执行/脚本！-代码部分end/body/html以上就是为大家分享的简单纯射流研究…实现点击切换拉环标签实例，希望大家可以喜欢。