来自 服务器&运维 2019-12-07 09:09 的文章
当前位置: 澳门威尼斯人平台 > 服务器&运维 > 正文

js完毕tab切换效果实例_javascript本事_脚本之家

  tab1 tab2 tab3     这是TAB切换效果区域1   这是TAB切换效果区域2   这是TAB切换效果区域3  

/** * tabs * @author 橡树小屋 */var tabs=function(){ function tag{ return .getElementsByTagName; } //获得相应ID的元素 function id{ return document.getElementById; } function first{ elem=elem.firstChild; return elem&&elem.nodeType==1? elem:next; } function next{ do{ elem=elem.nextSibling; }while( elem&&elem.nodeType!=1 ) return elem; } return { set:function{ var elem=tag; var tabs=tag; var listNum=elem.length; var tabNum=tabs.length; for(var i=0;ibody{ background:#FFF;}a{color:#585858}#menu{width:360px;}/*-------------------nav样式----------------------*/#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none; background:url}#menu #nav li {float:left;width:120px;}#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center} /*-------------------列表标题样式----------------------*/#menu_con{ width:358px; height:135px;border:1px solid #BF9660; border-top:none}.selected{background:url;}.clear{ clear:both}

效果如下:

上一篇《javascript实现tab切换的四种方法》中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例。

本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下

调用方法:

代码如下:

一、仿”中国人民大学“官网的tab切换,背景是图片,效果图如下:

1.html部分

tabs.set;

   js封装一个tab效果  *{margin:0; padding:0;}body { font:12px/1.8 Arial; color:#666;}.wrapper { width:500px; border:1px solid #e6e6e6; margin:0 auto; padding:50px;}/*--=tabPanel--*/#tab{border:1px solid #ccc;}#tab .tab-bd{border-top:none;margin:0 auto;padding:10px;text-align:left;height:120px;position:relative}.tab-nav{margin:0 auto;padding:0;background:#eee;height:26px;}.tab-nav li{display:inline;list-style:none outside none;width:90px;height:26px;float:left;line-height:26px;text-align:center;}.tab-nav li a{color:#555;display:inline-block}.tab-nav li a:hover,.tab-nav li.hover a{text-decoration:none;background:#fff;color:#000;display:block; }.hidden{display:none} function tabPanel{ var defaultIndex=param["default"]||0,//设置显示的页面 panelobj=param["panel"],//设置tab容器 defalutClass=param["defalutStyle"]||"",//设置tab菜单项的普通样式 hoverClass=param["hoverStyle"]||"hover",//设置鼠标移到tab菜单项的样式 currentIndex=defaultIndex, menus=_$.getElementsByTagName[0].getElementsByTagName, contents=_$.getElementsByTagName[1].getElementsByTagName, menuNumber=menus.length, hidden="hidden"; for(var i=0;i<menuNumber;i++){ _setClass(contents[0],hoverClass); _setClass; _setClass(menus[i],defalutClass); { menus[i].onmouseover=function(){ var old=menus[currentIndex]; _setClass; _setClass(contents[currentIndex],hidden); var cur=menus[i]; _setClass; currentIndex=i; _setClass; }; }); } _setClass(menus[currentIndex],hoverClass); _setClass(contents[currentIndex],""); //便利函数 function _setClass{obj.className=className} function _${return typeof == "string"?document.getElementById:oid}}    交易安全 淘宝大学 爱心     1111   222   333  tabPanel;//panel为必填项,default、defalutStyle、hoverStyle为选填项 

鼠标移到新闻时的效果

    时事 体育 娱乐    时事 体育 娱乐   

本文由澳门威尼斯人平台发布于服务器&运维,转载请注明出处:js完毕tab切换效果实例_javascript本事_脚本之家

关键词: