Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Tab</title><style type="text/css">/* Tab detail */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;}/* tab style */. convention_tab {clear: both; width: 100%; float: left; margin: 15px 0 0 0; background: url (yun_qi_img/switch_area.gif) left bottom repeat-x; padding-bottom: 3px; overflow: hidden; padding-right: 0px;}/* if the following area is table, then padding-right: 2px ;*/. convention_tab li {float: left; background: url (yun_qi_img/switch_area.gif) right top no-repeat; margin-left:-12px; padding: 0 30px 0 11px ;}. convention_tab li ,. 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;}/* each 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></pead><body><div class="container"><ul id="nav" class="convention_tab"><li class="start_tab current_tab">Tab 001</li><li>Disadvantages</li><li>Entertainment only</li><li>Tab 004</li><li id="end_tab">Tab 005</li></ul><div id="cardarea"><div class="item"><p>Here is the p tag in the div, because the class is not specified as item, so I do not participate in switching.</p></div><p class="item display_none">Events added after page loading are completed. The loading of some images is slow, so you can delete the addLoadEvent (getConfigInputObj) in external js, and then write getConfigInputObj () directly (); of course, it should be placed in </ptml> to ensure that xhtml has been loaded</p><p class="item display_none">The online demonstration shows that the Jquery tab plug-in is more powerful, but I am more practical ....</p><p class="item display_none">Fourth</p><p class="item display_none">Fifth</p></div><ul id="nav2" class="convention_tab"><li class="start_tab current_tab">Advantages</li><li>Usage</li><li>Parameter meaning</li><li>4th</li><li id="end_tab">Last</li></ul><div id="cardarea2"><p class="item">Highly Reusable. It works normally in IE6 +, Firefox2 +, and Opera9 and does not use hack.</p><p class="item display_none"><Input type = "hidden" id = "kp_OtherRegional" value = "nav, li, cardarea, item, current_tab | nav2, li, cardarea2, item, current_tab "title =" this is essential "/> to add events. Multiple regions are separated by vertical bars.</p><div class="item display_none"><dl><dt>The input element with id kp_OtherRegional has five parameters.</dt><dd>First: the element whose id is nav.</dd><dd>Second: get the element of the first step and traverse the specified element. It depends on the label you write, and the written li will traverse li.</dd><dd>Third: switch the parent container of the region, and switch the parent container ID of the region</dd><dd>Fourth: <p class = "item", there is no limit on what elements, but only those with the specified class can participate in switching.</dd><dd>Fifth: the style name of the current tag after the tag is switched.</dd></dl></div><p class="item display_none">This is the fourth region.</p><p class="item display_none">Fifth</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/javascript">/* AddLoadEvent. js */function addLoadEvent (func) {var oldonload = window. onload; if (typeof window. onload! = 'Function') {window. onload = func;} else {window. onload = function () {oldonload (); func () ;}}/* addLoadEvent. js end * // * 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; // Obtain the length of the event source object 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="";}}//然后单独给当前对象加上classNameif(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></ptml>
Tip: you can modify some code before running
