纯手工写的一个选项卡切换_js

下面这个标签是关键所在，共有5个参数，来赋予切换的功能。
<input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab" />
首先演示一下功能。
以下是html网页特效代码，点击运行按钮可查看效果：


 以下是程序代码

<!DOCTYPE <a href="https://www.gaodaima.com/tag/html" title="查看更多关于html的文章" target="_blank">html</a> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>选项卡</title> <style type="text/css"> /*  选项卡 ---------------------------------------------------------------- */ body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;} h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;} ul{list-style:none;} a{text-decoration:none;} .display_none{display:none;} /*选项卡的样式*/ .convention_tab{clear:both;width:100%;float:left;margin:15px 0 0 0;background:url(http://4.bp.blogspot.com/_bdBPvgEipxw/SMSk_BkFfaI/AAAAAAAAABQ/Auzj-1HXF1E/s320/switch_area.gif) left bottom repeat-x;padding-bottom:3px;overflow:hidden;padding-right:0px;}/*如果下面的区域是table，那么padding-right:2px;*/  .convention_tab li{float:left;background:url(http://4.bp.blogspot.com/_bdBPvgEipxw/SMSk_BkFfaI/AAAAAAAAABQ/Auzj-1HXF1E/s320/switch_area.gif) right top no-repeat;margin-left:-12px;padding:0 30px 0 11px;}   .convention_tab li a,.convention_tab li.normal_tab b{color:#fff;display:block;height:19px;float:left; background:#3C6084;padding-top:3px;}  .convention_tab li.current_tab{background-position:right -100px;border-left:solid 2px #fff; padding-bottom:2px;}   .convention_tab li.current_tab a{background-color:#98B1C5;color:#000;}  .convention_tab li.start_tab{margin-left:0;padding-left:0;border-left:none;}   .convention_tab li.start_tab a{padding-left:10px;}  .convention_tab li#end_tab{background-position:right -50px;}   .convention_tab li#end_tab a{padding-left:10px;}  .convention_tab li.current_tab#end_tab{background-position:right -140px;}   .convention_tab li.current_tab#end_tab a{background-color:#98B1C5;}  /*每个item*/  #cardarea,#cardarea2{border:solid 1px #3D5F85;clear:both;border-top:none;}   #cardarea p,#cardarea2 p{padding:20px;text-align:left;line-height:23px;}  #cardarea2 dl{text-align:left;padding:20px;line-height:23px;} </style> </head> <body> <div class="container">  <ul id="nav" class="convention_tab">   <li class="start_tab current_tab"><a href="#">选项卡001</a></li>   <li><a href="#">缺点</a></li>   <li><a href="#">仅供娱乐</a></li>   <li><a href="#">选项卡004</a></li>   <li id="end_tab"><a href="#">选项卡005</a></li>  </ul>  <div id="cardarea">   <div class="item"><p>这里是div中的p标签，因为没有指定class为item，所以我不参与切换。</p></div>   <p class="item display_none">我在页面加载完成后才添加的事件，可有的图片加载很慢，所以有时候可以把外部<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/js"  title="js" rel="nofollow" target="_blank">js</a>中的addLoadEvent(getConfigInputObj);删除掉，然后直接书写 getConfigInputObj();当然要放在</html>以保证xhtml已经加载完毕</p>   <p class="item display_none">看网上演示<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/jquery"  title="jquery" rel="nofollow" target="_blank">jquery</a>的tab插件更加强大，不过我这个更为实用，o(∩_∩)o...。</p>   <p class="item display_none">第四个</p>   <p class="item display_none">第五个</p>  </div>  <ul id="nav2" class="convention_tab">   <li class="start_tab current_tab"><a href="#">优点</a></li>   <li><a href="#">使用方法</a></li>   <li><a href="#">参数的意思</a></li>   <li><a href="#">第4个</a></li>   <li id="end_tab"><a href="#">最后一个</a></li>  </ul>  <div id="cardarea2">   <p class="item">重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作，且并没有使用hack。</p>   <p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;"> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /> </span>即可完成事件添加,多个区域用竖线隔开。</p>    <div class="item display_none">    <dl>     <dt>id为kp_OtherRegional的input元素共有5个参数</dt>     <dd>第一个:表示id为nav的那个元素。</dd>     <dd>第二个:获取到第一步的元素，遍历指定的元素，这取决于你写的什么标签，写的li它就会遍历li。</dd>     <dd>第三个:切换区域的父容器,切换区域的父容器ID</dd>     <dd>第四个:<p class="item",这里没有限定是什么元素，而是限定带有指定class的才能参与切换。</dd>     <dd>第五个:切换标签后当前标签的样式名。</dd>    </dl>   </div>   <p class="item display_none">这里是第四个区域</p>   <p class="item display_none">第五个</p>  </div> </div> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /> <script type="text/<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/javascript"  title="JavaScript" rel="nofollow" target="_blank">JavaScript</a>"> /*addLoadEvent.<a href="https://www.gaodaima.com/tag/js" title="查看更多关于js的文章" target="_blank">js</a>*/ function addLoadEvent(func) {   var oldonload = window.onload;   if (typeof window.onload != 'function') {     window.onload = func;   } else {     window.onload = function() {       oldonload();       func();     }   } } /*addLoadEvent.js结束*/ /*switch_display_area.js*/ function getConfigInputObj(){  if(!document.getElementById || !document.getElementsByTagName)return;  var configObj=document.getElementById("kp_OtherRegional");if(configObj==null)return;  var configValue=configObj.getAttribute("value").replace(//s/g,"");  var configArray=configValue.split("|")  var length=configArray.length;  var childConfigArray=null;  var childConfigValue="";  for(var i=0;i<length;i++){   childConfigArray=configArray[i].split(",");   giveEvent(childConfigArray);  }  //destroy(getConfigInputObj); } function giveEvent(obj){  if(obj==null){return;}  var parentId=obj[0];  var whichToTrigger=obj[1];  var itemParent=obj[2];  var itemClass=obj[3];  var currentClassName=obj[4];  var listerEvent=obj[5];  if(!parentId || !whichToTrigger || !itemParent || !itemClass)return;  var parentObj=null;  var whichToTriggerObj=null;  var itemParentObj=null;  var itemObj=null;  /*准备好各个元素*/  parentObj=document.getElementById(parentId);  if(!parentObj){return;}  itemParentObj=document.getElementById(itemParent);  whichToTriggerObj=parentObj.getElementsByTagName(whichToTrigger);//获取事件源对象的集合  if(!parentObj || !itemParentObj || !whichToTriggerObj)return;  itemObj=itemParentObj.getElementsByTagName("*");  var length=itemObj.length;  var objArray=new Array();  for(var i=0;i<itemObj.length;i++){   if(itemObj[i].className.indexOf(itemClass)>-1){    objArray.push(itemObj[i]);   }  }  var whichToTriggerObjLength=whichToTriggerObj.length;//获取事件源对象的长度  var isExistAObj=null;  for(var i=0;i<whichToTriggerObjLength;i++){   whichToTriggerObj[i].setAttribute("oldClassName",whichToTriggerObj[i].className.replace(currentClassName));   whichToTriggerObj[i].setAttribute("currentNum",i);   if(listerEvent==null){    whichToTriggerObj[i].onclick=function(){     //return      return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);    }    isExistAObj=whichToTriggerObj[i].getElementsByTagName("a");    if(isExistAObj.length>0){     for(var j=0;j<isExistAObj.length;j++){      isExistAObj[j].onfocus=function(){this.blur();}     }    }   }else{    whichToTriggerObj[i].onmouseover=function(){     //return      return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);    }   }   whichToTriggerObj[i].onfocus=function(){    this.blur();   }  }  //destroy(giveEvent); } //功能; 根据传递的参数切换（显示或隐藏）各个区域 function correspondingRegion(obj,objArray,currentClassName,whichToTriggerObj){  var length=objArray.length;  var currentNum=parseInt(obj.getAttribute("currentNum"),10);  if(!objArray[currentNum]){   /*alert("该div不存在");*/   return;  }else{   /*先将所有样式 “归零”*/   for(var i=0;i<length;i++){    objArray[i].style.display="none";    if(whichToTriggerObj[i]==null){continue;}    //如果有老的样式    if(whichToTriggerObj[i].getAttribute("oldClassName")!="" && whichToTriggerObj[i].getAttribute("oldClassName").indexOf(currentClassName)<0){     whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");    }else if(whichToTriggerObj[i].getAttribute("oldClassName")!=""){     whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");    }else{     whichToTriggerObj[i].className="";    }   }   //然后单独给当前对象加上className   if(objArray[currentNum]!=null){    objArray[currentNum].style.display="block";    if(obj.getAttribute("oldClassName")!=""){     obj.className=currentClassName+" "+obj.getAttribute("oldClassName");    }else{     obj.className=currentClassName;    }    //return false;   }else{    //return true;   }   return false;  } } addLoadEvent(getConfigInputObj); /*switch_display_area.js结束*/ </script> </body> </html></font>  </CODE> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
  
 [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 
已经封装好了的，如果你要使用，就把其中的js做成外部文件。
实现，只需要两步。
1：引入外部js；
2：然后书写那个input正确的参数，多个的话用 | 隔开。

欢迎大家阅读《纯手工写的一个选项卡切换_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权 
转载请注明原文链接：纯手工写的一个选项卡切换_js 
 
  喜欢 (0)赏
[搞代码]
分享 (0)
Hi，您需要填写昵称和邮箱！
