趁着春天播下品牌的种子

小谭建站工作室品牌建设为你而来

JS如何实现标签页切换效果

这篇文章给大家分享的是有关JS如何实现标签页切换效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联公司专注于企业成都营销网站建设、网站重做改版、电白网站定制设计、自适应品牌网站建设、H5场景定制、成都商城网站开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为电白等各大城市提供网站开发制作服务。

具体内容如下




resize

*{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; }




 
  标签一
  标签二
  标签三
  标签4
  标签5
 
 
   内容一
内容一

内容二
内容二

内容三
内容三

   内容4
内容4    内容4
内容5555555555555555 //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= 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();

感谢各位的阅读！关于“JS如何实现标签页切换效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

文章标题：JS如何实现标签页切换效果
本文地址：http://scjbc.cn/article/pipspe.html

其他资讯