宜宾网站建设公司

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://ybzwz.com/article/pipspe.html

    其他资讯