JavaScript之tab面板切换
自己写了一个tab选项卡的切换，感觉还不错，跟大家分享一下。
一、点击切换
页面效果：
html页面：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>tab面板切换</title> <style> .content{width: 1000px;height: 500px;margin: 0 auto;border: 1px solid #ccc} #sel_ul{width: 100%;text-align: center;overflow: hidden;border: 1px solid #ccc;} #sel_ul li{display: inline-block;width: 75px;height: 75px;border-right: 1px solid #ccc;cursor: pointer;} img{width: 100%;height: auto;} .banner{width: 1000px;height: 400px;display: none;} .on{display: block;} </style> </head> <body> <div class="content"> <div id="sel_ul"> <li><img src="img/shap_1.png" ></li> <li><img src="img/shap_3.png" ></li> <li><img src="img/shap_4.png" ></li> </div> <div class="banner on">aaaa</div> <div class="banner">bbbb</div> <div class="banner">cccc</div> </div> </body> </html>
js：
var ChangeNode=function(b_img_src,g_img_src,target,banner_t) { this.blue_img_src=b_img_src;//点亮的图片 this.gray_img_scr=g_img_src;//未点亮的灰色图片 this.img_li=target;//包含img标签的li容器 this.banner_tartet=banner_t;//banner面板 } /* @news:新的ChangeNode对象 @old：与news相对 * */ function changeImg(news,old) { if(old!=null) { old.img_li.querySelector("img").src=old.gray_img_scr; old.banner_tartet.className="banner"; } news.img_li.querySelector("img").src=news.blue_img_src; news.banner_tartet.className="banner on"; } (function(){ if(document.getElementById){ if(!document.getElementById("sel_ul")){ return false; } } var sel_ul=document.getElementById("sel_ul"), sel_li=sel_ul.querySelectorAll("li"), li_len=sel_li.length || sel_ul.childNodes.length,//获取子元素的长度 banner_list=document.querySelectorAll(".banner"); var changeImgFooPool=new Array(); changeImgFooPool[0]=new ChangeNode("img/shap_1_sel.png","img/shap_1.png",sel_li[0],banner_list[0]); changeImgFooPool[1]=new ChangeNode("img/shap_3_sel.png","img/shap_3.png",sel_li[1],banner_list[1]); changeImgFooPool[2]=new ChangeNode("img/shap_4_sel.png","img/shap_4.png",sel_li[2],banner_list[2]); var index=-1; for(var i=0;i<li_len;i++){ index=index+1; sel_li[i].setAttribute("index",index); } var currentTarget=null; currentTarget=changeImgFooPool[0]; changeImg(currentTarget,null); sel_ul.onclick=function(e){ var evt=e||window.event; var target=evt.target||evt.srcElement; var temp=null; if(target.nodeName.toLowerCase()=="img"){ for(var i=0;i<li_len;i++) { if(target.parentNode==changeImgFooPool[i].img_li){ temp=changeImgFooPool[i]; break; } } changeImg(temp,currentTarget); currentTarget=temp; } } })();
二、鼠标滑过切换
页面预览：
页面代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab滑过切换</title> <style> *{ padding: 0; margin: 0 auto; } ul ,li{list-style: none;} .all{ width: 280px; height: 150px; border: 1px solid #666666; } .notic-tit{ width: 280px; height: 40px; line-height: 40px; background: #CCCCCC; font-size: 16px; text-align: center; } .notic-tit ul li{ float: left; width: 68px; height:39px; border-bottom: 1px solid #CCCCCC; padding: 0 1px; } .notic-tit ul li.select{ background: white; font-weight: bolder; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom-color:white ; color: orange; padding: 0; } .content-inner{ width: 280px;margin: 20px;} </style> </head> <body> <div class="all"> <div class="notic-tit"> <ul> <li class="select"><a>娱乐</a></li> <li ><a>体育</a></li> <li ><a>购物</a></li> <li ><a>美食</a></li> </ul> </div> <div id="content"> <div class="content-inner" style="display: block;"> <p>呵呵而后 娱乐</p> </div> <div class="content-inner" style="display: none;"> <p>呵呵而后 体育</p> </div> <div class="content-inner" style="display: none;"> <p>呵呵而后 购物</p> </div> <div class="content-inner" style="display: none;"> <p>呵呵而后 美食</p> </div> </div> </div> <script> window.onload=function(){ var notic_tit=document.querySelector(".notic-tit"); var li=notic_tit.getElementsByTagName("li"); var content_inner=document.getElementsByClassName("content-inner"); for(var i=0;i<li.length;i++){ li[i].id=i; li[i].onmouseover=function(){ for(var j=0;j<li.length;j++){ li[j].className=""; content_inner[j].style.display="none"; } this.className="select"; content_inner[this.id].style.display="block"; } } } </script> </body> </html>
因为js没有像jQuery有addClass，removeClass之类的方法，我在网上看到用js实现这方面的方法，记录一下，方便以后使用。
function addClass(obj, cls) { if (!this.hasClass(obj, cls)) { obj.className += " " + cls; } } function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); } }
