济南网站建设难-网站前端开发js+Tab切换可关闭

--------

济南网站建设难

------- 看了许多他人写的tab切换实际效果觉得都只是div+js去切换已存在的!有的是加上或删掉tab的可是太麻烦了还要改js文档你说是否很不便捷呢,我这个立即改动网页页面里边的主要参数便可以了!因此我自身就写了这个作用!谢谢,假如转载请注明出处(p> 实际效果图以下:

 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN TR/xhtml1/DTD/xhtml1-transitional.dtd 
 html xmlns= 1999/xhtml 
 head 
 title 前端开发设计方案js+Tab切换可关掉+加上并全自动分辨是不是已开启全自动切换当今情况 /title 
 style 
 body,html{height:100%;}
 #div_pannel{height:800px;}
 *{margin:0;padding:0;}
 #menu{padding:10px 0 0 10px;}
 #menu a{color:#333;}
 #menu a.crent{color:#ff0000;}
 #div_tab{background:#fff url(images/t_tab_bg.gif) repeat-x 0 bottom;height:26px;padding:15px 15px 0;margin-bottom:10px;}
 #div_tab li{float:left;text-align:center;position:relative;list-style:none;}
 #div_tab li{background:url(images/t_tab_uselectbg.gif);margin-top:3px;height:23px;}
 #div_tab li span{background:url(images/t_tab_uselectbg.gif);height:23px;line-height:23px;}
 #div_tab li.crent{background:url(images/t_tab_selectbg.gif);margin-top:2px;height:24px;}
 #div_tab li.crent span{background:url(images/t_tab_selectbg.gif);height:24px;line-height:24px;}
 #div_tab li,#div_tab li.crent{color:#fff;background-repeat:no-repeat;background-position:0 0;} 
 #div_tab li span,#div_tab li.crent span{display:inline-block;padding:0 36px 0 15px;background-repeat:no-repeat;background-position:right bottom;}
 #div_tab li .menua{color:#000;font-size:12px; text-decoration:none;position:relative;}
 #div_tab li.crent .menua,#div_tab li .menua:hover{color:#ff0000;}
 #div_tab li .win_close,#div_tab li.crent .win_close{width:14px;height:14px;position:absolute;top:4px;right:5px;cursor:pointer;display:block;overflow:hidden;background:url(images/t_delete_ico.gif) no-repeat;} 
 #div_tab li .win_close{background-position:0 ⒁px;}
 #div_tab li .win_close:hover{background-position:0 0;}
 .clearfix:after {content: . display:block;height:0;clear:both; visibility:hidden;} 
 *html .clearfix{height:1%;}
 *+html .clearfix{height:1%;}
 .clearfix{display:inline-block;} 
 /* Hide from IE Mac */ 
 .clearfix {display:block;}
 /style 
 script type= text/javascript 
 function CreateDiv(tabid, url, name)
 setacrent(tabid);
 ///假如当今tabid存在立即显示信息早已开启的tab
 if (document.getElementById( div_ + tabid) == null)
 //建立iframe
 var box = document.createElement( iframe 
 box.id = div_ + tabid;
 box.src = url;
 box.height = 100% 
 box.frameBorder = 0;
 box.width = 100% 
 document.getElementById( div_pannel ).appendChild(box);
 //遍历并消除刚开始存在的tab当今实际效果并掩藏其显示信息的div
 var tablist = document.getElementById( div_tab ).getElementsByTagName( li 
 var pannellist = document.getElementById( div_pannel ).getElementsByTagName( iframe 
 if (tablist.length 0)
 for (i = 0; i tablist.length; i++)
 tablist[i].className = 
 pannellist[i].style.display = none 
 //建立li菜单
 var tab = document.createElement( li 
 tab.className = crent 
 tab.id = tabid;
 var litxt = span a href=\ javascript:;\ javascript:CreateDiv( + tabid + , + url + , + name + )\ title= + name + >
 完

大伙儿有甚么难题或技术性上的念头能够在此与大伙儿共享,还可以添加前端开发喜好者QQ群()一起学习培训发展:【幸凡前端开发技术性沟通交流群】如需转载请注明出处:art_detail.aspx?id=118【前端开发设计方案js+Tab切换可关掉+加上并全自动分辨是不是已开启全自动切换当今情况】幸凡学习培训网 0 ---------

济南网站建设难

------------

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://fkjzgwx.cn/ziyuan/4363.html