JS实现标签页切换效果

　　

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

< html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >resize</ title > < style type = "text/css" > *{margin:0;padding:0;}   #wrap{width:500px; margin:10px auto; }   #tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }   #tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor: pointer;}   #tag .current{ color:#000; background:#ccc; }   #tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; } </ style > </ head > < body > < div id = "warp" >   < ul id = "tag" >    < li >标签一</ li >    < li >标签二</ li >    < li >标签三</ li >    < li >标签4</ li >    < li >标签5</ li >   </ ul >   < div id = "tagContent" >    < div class = "J_tabClass" > 内容一< br >内容一 </ div >    < div class = "J_tabClass" > 内容二< br >内容二 </ div >    < div class = "J_tabClass" > 内容三< br >内容三 </ div >    < div class = "J_tabClass" > 内容4< br >内容4 </ div >    < div class = "J_tabClass" > 内容4< br >内容5555555555555555 </ div >   </ div > </ div > < script type = "text/javascript" > //nameSpace var VVG = {}; VVG.DOM = {}; //创建getElementsByClassName方法 VVG.DOM.getElementsByClassName = function(str,parent,tag){   //父节点存在 if(parent){   // 当父节点为string类型时，查找DOM节点，否则直接引用parent    parent = typeof parent == "string" ? document.getElementById(parent):parent;    // parent为空时提示错误信息 if(!parent) alert("找不到标签，请检查参数是否正确");   }else{    // 未传值时，父节点为body    parent = document.body;   }   // tagContent为节点类型，未传值时为all节点   tag = tag || "*";   // 在父节点查找子节点，建立空数组arr var els = parent.getElementsByTagName(tag),arr=[];   for(var i=0,n=els.length;i< n ;i++){    // 查找每个节点下的classname，以空格分离为一个k数组 for(var j = 0 , k = els [i].className.split(" "), l = k .length;j<1;j++){     // 当K数组中有一个值与str值相等时，记住这个标签并推入arr数组 if(k[j]==str){     arr.push(els[i]);     break;     }    }   }   // 返回数组 return arr; } //创建TabManager对象 VVG.TabManager = function (oo){     this.root = oo.root || "warp";     this.tabUlId = oo .tabUlId||"tabUlId";     this.tabConId = oo .tabConId||"tabConId";     this.tabConClass = oo .tabConClass||"J_tabClass";     this.trggle = oo .trggle || "click";     this.currentCss = oo .currentCss || "current";    } VVG.TabManager.prototype = {    tabChange:function(){     // 获取UL的id var ulid = document .getElementById(this.tabUlId);     // 获取UL下的LI元素 var ulli = ulid .getElementsByTagName("li");     // 获取内容盒子DIV元素 var tabConId = document .getElementById(this.tabConId);     // 获取root下的div的class为特定值的对象数组 var tabConClasses = VVG .DOM.getElementsByClassName(this.tabConClass,this.root,"div");     // 初始化     ulli[0] .className = this .currentCss;     tabConClasses[0] .style.display = 'block' ;     for (var i = ulli .length - 1; i >= 0; i--) {     // 赋值this 与 that,避免this混乱 var that = this;     // 设置对象index属性     ulli[i].index = i;     // 设置对象的事件     ulli[i]["on" + this.trggle] = function(){      for(var j = tabConClasses.length - 1; j >= 0; j--){       tabConClasses[j].style.display = "none";       ulli[j].className = "";      }      tabConClasses[this.index].style.display = "block";      this.className = that.currentCss;     }     }    }   } // 新建对象实例 var TabManager1 = new VVG.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();   </ script > </ body > </ html >

以上就是本文的全部内容，希望对大家的学习有所帮助，

出处至：　　脚本之家 http://www.jb51.net/article/112886.htm

转载于:https://www.cnblogs.com/bcphp/p/7080081.html