微客导航 » 文章资讯 » JS实现标签页切换效果

JS实现标签页切换效果

2024-02-24 11:20:03 210

本文实例为大家分享了JS标签页切换的具体代码，供大家参考，具体内容如下




resize

*{margin:0;padding:0;}
#wrap{width:500px;margin:10pxauto;}
#tag{width:498px;overflow:hidden;background:#000;border:1pxsolid#000;}
#tagli{list-style:none;float:left;margin-right:0px;color:white;padding:5px20px;cursor:pointer;}
#tag.current{color:#000;background:#ccc;}
#tagContentdiv{width:498px;border:1pxsolid#000;border-top:none;height:300px;display:none;}





标签一
标签二
标签三
标签4
标签5


内容一
内容一

内容二
内容二

内容三
内容三

内容4
内容4

内容4
内容5555555555555555

//nameSpace varVVG={}; VVG.DOM={}; //创建getElementsByClassName方法 VVG.DOM.getElementsByClassName=function(str,parent,tag){ //父节点存在 if(parent){ //当父节点为string类型时，查找DOM节点，否则直接引用parent parent=typeofparent=="string"?document.getElementById(parent):parent; //parent为空时提示错误信息 if(!parent)alert("找不到标签，请检查参数是否正确"); }else{ //未传值时，父节点为body parent=document.body; } //tagContent为节点类型，未传值时为all节点 tag=tag||"*"; //在父节点查找子节点，建立空数组arr varels=parent.getElementsByTagName(tag),arr=[]; for(vari=0,n=els.length;i=0;i--){ //赋值this与that,避免this混乱 varthat=this; //设置对象index属性 ulli[i].index=i; //设置对象的事件 ulli[i]["on"+this.trggle]=function(){ for(varj=tabConClasses.length-1;j>=0;j--){ tabConClasses[j].style.display="none"; ulli[j].className=""; } tabConClasses[this.index].style.display="block"; this.className=that.currentCss; } } } } //新建对象实例 varTabManager1=newVVG.TabManager( { root:"warp",//包裹tab对象的div层的ID名称，必填 tabUlId:"tag",//TAB标签LI元素的父亲UL元素的ID名称，必填 tabConId:"tagContent",//内容元素的包裹盒子的ID名称，必填 trggle:"mouseover",//切换方式，默认为click，可选 currentCss:"current",//TAB标签liy元素的当前CSS名称，默认为current tabConClass:"J_tabClass",//内容元素的CLASS名称，默认为J_tabClass } ); //调用对象方法 TabManager1.tabChange();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JS实现标签页切换效果

热门推荐

随机推荐