13518219792

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://cdweb.net/article/pipspe.html

其他资讯