资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
用javascript实现的不错的一款网页选项卡
这款选项卡效果，是我见过的一个不错的选项卡效果，不是最好，也是很好的
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Javascript 标签页（TAB）浏览控件推介之：DOMTab - javascript, DOMTab, TAB, 标签页, </title> <style type="text/css"> <!-- body { margin:0; padding:10px 5px; font-size:12px; font-family:verdana,arial,sans-serif,"宋体"; } #warp { width:600px; margin:0 auto; } /* TAB样式 开始 */ ul.domtabs { list-style: none; font-size: 0.9em; border-bottom: 1px solid #D55E12; margin: 0 0 20px 0; padding: 0 30px 2px 0; text-align: right; } ul.domtabs li { display: inline; margin: 0; } ul.domtabs a:link, ul.domtabs a:visited, ul.domtabs a:active, ul.domtabs a:hover { text-decoration: none; padding: 2px 5px 4px 5px; position: relative; bottom: 1px; color: #EA8544; } ul.domtabs li.active a:link, ul.domtabs li.active a:visited, ul.domtabs li.active a:active, ul.domtabs li.active a:hover { background:#fff; padding: 2px 10px 4px 10px; border: 1px solid #D55E12; border-bottom: 1px solid #fff; position: relative; bottom: 1px; color: #D55E12; font-weight:bold; } ul.domtabs a:hover { text-decoration: underline; color: #D55E12; } ul.domtabs li.active a:hover { text-decoration: none; } /* 前后跳转 */ ul.prevnext { list-style-type: none; margin: 0; padding: .5em 0; border-top: 1px solid #D55E12; } ul.prevnext li a { display: block; width: 6em; color: #FFF; background-color: #D55E12; padding: 2px 0; text-align: center; text-decoration: none; font:12px bold "verdana"; } ul.prevnext li a:hover { color: #FFF; background-color: #EA8544; } ul.prevnext .prev { float: left; } ul.prevnext .next { float: right; } h2.title {color:#D55E12;} --> </style> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%2F*%20%0D%0A%20%20%20%20DOMtab%20Version%203.1415927%20%0D%0A%20%20%20%20Updated%20March%20the%20First%202006%20%0D%0A%20%20%20%20written%20by%20Christian%20Heilmann%20%0D%0A%20%20%20%20check%20blog%20for%20updates%3A%20%3Ca%20href%3D%22http%3A%2F%2Fwww.wait-till-i.com%22%20target%3D%22_blank%22%3Ehttp%3A%2F%2Fwww.wait-till-i.com%3C%2Fa%3E%20%20%20%20%20%0D%0A%20%20%20%20free%20to%20use%2C%20not%20free%20to%20resell%20%0D%0A*%2F%20%0D%0Adomtab%3D%7B%20%0D%0A%20%20%20%20tabClass%3A'domtab'%2C%20%2F%2F%20class%20to%20trigger%20tabbing%20%0D%0A%20%20%20%20listClass%3A'domtabs'%2C%20%2F%2F%20class%20of%20the%20menus%20%0D%0A%20%20%20%20activeClass%3A'active'%2C%20%2F%2F%20class%20of%20current%20link%20%0D%0A%20%20%20%20contentElements%3A'div'%2C%20%2F%2F%20elements%20to%20loop%20through%20%0D%0A%20%20%20%20backToLinks%3A%2F%23top%2F%2C%20%2F%2F%20pattern%20to%20check%20%22back%20to%20top%22%20links%20%0D%0A%20%20%20%20printID%3A'domtabprintview'%2C%20%2F%2F%20id%20of%20the%20print%20all%20link%20%0D%0A%20%20%20%20showAllLinkText%3A'show%20all%20content'%2C%20%2F%2F%20text%20for%20the%20print%20all%20link%20%0D%0A%20%20%20%20prevNextIndicator%3A'doprevnext'%2C%20%2F%2F%20class%20to%20trigger%20prev%20and%20next%20links%20%0D%0A%20%20%20%20prevNextClass%3A'prevnext'%2C%20%2F%2F%20class%20of%20the%20prev%20and%20next%20list%20%0D%0A%20%20%20%20prevLabel%3A'previous'%2C%20%2F%2F%20HTML%20content%20of%20the%20prev%20link%20%0D%0A%20%20%20%20nextLabel%3A'next'%2C%20%2F%2F%20HTML%20content%20of%20the%20next%20link%20%0D%0A%20%20%20%20prevClass%3A'prev'%2C%20%2F%2F%20class%20for%20the%20prev%20link%20%0D%0A%20%20%20%20nextClass%3A'next'%2C%20%2F%2F%20class%20for%20the%20next%20link%20%0D%0A%20%20%20%20init%3Afunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20temp%3B%20%0D%0A%20%20%20%20%20%20%20%20if(!document.getElementById%20%7C%7C%20!document.createTextNode)%7Breturn%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20var%20tempelm%3Ddocument.getElementsByTagName('div')%3B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Ctempelm.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!domtab.cssjs('check'%2Ctempelm%5Bi%5D%2Cdomtab.tabClass))%7Bcontinue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20domtab.initTabMenu(tempelm%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20domtab.removeBackLinks(tempelm%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(domtab.cssjs('check'%2Ctempelm%5Bi%5D%2Cdomtab.prevNextIndicator))%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20domtab.addPrevNext(tempelm%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20domtab.checkURL()%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if(document.getElementById(domtab.printID)%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%26%26%20!document.getElementById(domtab.printID).getElementsByTagName('a')%5B0%5D)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20newlink%3Ddocument.createElement('a')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20newlink.setAttribute('href'%2C'%23')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20domtab.addEvent(newlink%2C'click'%2Cdomtab.showAll%2Cfalse)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20newlink.onclick%3Dfunction()%7Breturn%20false%3B%7D%20%2F%2F%20safari%20hack%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20newlink.appendChild(document.createTextNode(domtab.showAllLinkText))%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(domtab.printID).appendChild(newlink)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20checkURL%3Afunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20id%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20loc%3Dwindow.location.toString()%3B%20%0D%0A%20%20%20%20%20%20%20%20loc%3D%2F%23%2F.test(loc)%3Floc.match(%2F%23(%5Cw.%2B)%2F)%5B1%5D%3A''%3B%20%0D%0A%20%20%20%20%20%20%20%20if(loc%3D%3D'')%7Breturn%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20var%20elm%3Ddocument.getElementById(loc)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(!elm)%7Breturn%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20var%20parentMenu%3Delm.parentNode.parentNode.parentNode%3B%20%0D%0A%20%20%20%20%20%20%20%20parentMenu.currentSection%3Dloc%3B%20%0D%0A%20%20%20%20%20%20%20%20parentMenu.getElementsByTagName(domtab.contentElements)%5B0%5D.style.display%3D'none'%3B%20%0D%0A%20%20%20%20%20%20%20%20domtab.cssjs('remove'%2CparentMenu.getElementsByTagName('a')%5B0%5D.parentNode%2Cdomtab.activeClass)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20links%3DparentMenu.getElementsByTagName('a')%3B%20%0D%0A%20%20%20%20%20%20%20%20for(i%3D0%3Bi%3Clinks.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!links%5Bi%5D.getAttribute('href'))%7Bcontinue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!%2F%23%2F.test(links%5Bi%5D.getAttribute('href').toString()))%7Bcontinue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3Dlinks%5Bi%5D.href.match(%2F%23(%5Cw.%2B)%2F)%5B1%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(id%3D%3Dloc)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20cur%3Dlinks%5Bi%5D.parentNode.parentNode%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20domtab.cssjs('add'%2Clinks%5Bi%5D.parentNode%2Cdomtab.activeClass)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20domtab.changeTab(elm%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20elm.focus()%3B%20%0D%0A%20%20%20%20%20%20%20%20cur.currentLink%3Dlinks%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20cur.currentSection%3Dloc%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20showAll%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID))%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20tempelm%3Ddocument.getElementsByTagName('div')%3B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Ctempelm.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!domtab.cssjs('check'%2Ctempelm%5Bi%5D%2Cdomtab.tabClass))%7Bcontinue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20sec%3Dtempelm%5Bi%5D.getElementsByTagName(domtab.contentElements)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20for(var%20j%3D0%3Bj%3Csec.length%3Bj%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sec%5Bj%5D.style.display%3D'block'%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20var%20tempelm%3Ddocument.getElementsByTagName('ul')%3B%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20for(i%3D0%3Bi%3Ctempelm.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!domtab.cssjs('check'%2Ctempelm%5Bi%5D%2Cdomtab.prevNextClass))%7Bcontinue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tempelm%5Bi%5D.parentNode.removeChild(tempelm%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20i--%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20domtab.cancelClick(e)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20addPrevNext%3Afunction(menu)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20temp%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20sections%3Dmenu.getElementsByTagName(domtab.contentElements)%3B%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Csections.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20temp%3Ddomtab.createPrevNext()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(i%3D%3D0)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20temp.removeChild(temp.getElementsByTagName('li')%5B0%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(i%3D%3Dsections.length-1)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20temp.removeChild(temp.getElementsByTagName('li')%5B1%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20temp.i%3Di%3B%20%2F%2F%20h4xx0r!%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20temp.menu%3Dmenu%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20sections%5Bi%5D.appendChild(temp)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20removeBackLinks%3Afunction(menu)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20links%3Dmenu.getElementsByTagName('a')%3B%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Clinks.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!domtab.backToLinks.test(links%5Bi%5D.href))%7Bcontinue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20links%5Bi%5D.parentNode.removeChild(links%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20i--%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20initTabMenu%3Afunction(menu)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20id%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20lists%3Dmenu.getElementsByTagName('ul')%3B%20%0D%0A%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Clists.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(domtab.cssjs('check'%2Clists%5Bi%5D%2Cdomtab.listClass))%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20thismenu%3Dlists%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if(!thismenu)%7Breturn%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20thismenu.currentSection%3D''%3B%20%0D%0A%20%20%20%20%20%20%20%20thismenu.currentLink%3D''%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20links%3Dthismenu.getElementsByTagName('a')%3B%20%0D%0A%20%20%20%20%20%20%20%20for(i%3D0%3Bi%3Clinks.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(!%2F%23%2F.test(links%5Bi%5D.getAttribute('href').toString()))%7Bcontinue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20id%3Dlinks%5Bi%5D.href.match(%2F%23(%5Cw.%2B)%2F)%5B1%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(document.getElementById(id))%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20domtab.addEvent(links%5Bi%5D%2C'click'%2Cdomtab.showTab%2Cfalse)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20links%5Bi%5D.onclick%3Dfunction()%7Breturn%20false%3B%7D%20%2F%2F%20safari%20hack%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20domtab.changeTab(document.getElementById(id)%2C0)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20id%3Dlinks%5B0%5D.href.match(%2F%23(%5Cw.%2B)%2F)%5B1%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20if(document.getElementById(id))%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20domtab.changeTab(document.getElementById(id)%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20thismenu.currentSection%3Did%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20thismenu.currentLink%3Dlinks%5B0%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20domtab.cssjs('add'%2Clinks%5B0%5D.parentNode%2Cdomtab.activeClass)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20createPrevNext%3Afunction()%7B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20this%20would%20be%20so%20much%20easier%20with%20innerHTML%2C%20darn%20you%20standards%20fetish!%20%0D%0A%20%20%20%20%20%20%20%20var%20temp%3Ddocument.createElement('ul')%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.className%3Ddomtab.prevNextClass%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.appendChild(document.createElement('li'))%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('li')%5B0%5D.appendChild(document.createElement('a'))%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('a')%5B0%5D.setAttribute('href'%2C'%23')%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('a')%5B0%5D.innerHTML%3Ddomtab.prevLabel%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('li')%5B0%5D.className%3Ddomtab.prevClass%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.appendChild(document.createElement('li'))%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('li')%5B1%5D.appendChild(document.createElement('a'))%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('a')%5B1%5D.setAttribute('href'%2C'%23')%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('a')%5B1%5D.innerHTML%3Ddomtab.nextLabel%3B%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('li')%5B1%5D.className%3Ddomtab.nextClass%3B%20%0D%0A%20%20%20%20%20%20%20%20domtab.addEvent(temp.getElementsByTagName('a')%5B0%5D%2C'click'%2Cdomtab.navTabs%2Cfalse)%3B%20%0D%0A%20%20%20%20%20%20%20%20domtab.addEvent(temp.getElementsByTagName('a')%5B1%5D%2C'click'%2Cdomtab.navTabs%2Cfalse)%3B%20%0D%0A%20%20%20%20%20%20%20%20%2F%2F%20safari%20fix%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('a')%5B0%5D.onclick%3Dfunction()%7Breturn%20false%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20temp.getElementsByTagName('a')%5B1%5D.onclick%3Dfunction()%7Breturn%20false%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20temp%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20navTabs%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20li%3Ddomtab.getTarget(e)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20menu%3Dli.parentNode.parentNode.menu%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20count%3Dli.parentNode.parentNode.i%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20section%3Dmenu.getElementsByTagName(domtab.contentElements)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20links%3Dmenu.getElementsByTagName('a')%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20othercount%3D(li.parentNode.className%3D%3Ddomtab.prevClass)%3Fcount-1%3Acount%2B1%3B%20%0D%0A%20%20%20%20%20%20%20%20section%5Bcount%5D.style.display%3D'none'%3B%20%0D%0A%20%20%20%20%20%20%20%20domtab.cssjs('remove'%2Clinks%5Bcount%5D.parentNode%2Cdomtab.activeClass)%3B%20%0D%0A%20%20%20%20%20%20%20%20section%5Bothercount%5D.style.display%3D'block'%3B%20%0D%0A%20%20%20%20%20%20%20%20domtab.cssjs('add'%2Clinks%5Bothercount%5D.parentNode%2Cdomtab.activeClass)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20parent%3Dlinks%5Bcount%5D.parentNode.parentNode%3B%20%0D%0A%20%20%20%20%20%20%20%20parent.currentLink%3Dlinks%5Bothercount%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20parent.currentSection%3Dlinks%5Bothercount%5D.href.match(%2F%23(%5Cw.%2B)%2F)%5B1%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20domtab.cancelClick(e)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20changeTab%3Afunction(elm%2Cstate)%7B%20%0D%0A%20%20%20%20%20%20%20%20do%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20elm%3Delm.parentNode%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20while(elm.nodeName.toLowerCase()!%3Ddomtab.contentElements)%20%0D%0A%20%20%20%20%20%20%20%20elm.style.display%3Dstate%3D%3D0%3F'none'%3A'block'%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20showTab%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20o%3Ddomtab.getTarget(e)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(o.parentNode.parentNode.currentSection!%3D'')%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection)%2C0)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20domtab.cssjs('remove'%2Co.parentNode.parentNode.currentLink.parentNode%2Cdomtab.activeClass)%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20var%20id%3Do.href.match(%2F%23(%5Cw.%2B)%2F)%5B1%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20o.parentNode.parentNode.currentSection%3Did%3B%20%0D%0A%20%20%20%20%20%20%20%20o.parentNode.parentNode.currentLink%3Do%3B%20%0D%0A%20%20%20%20%20%20%20%20domtab.cssjs('add'%2Co.parentNode%2Cdomtab.activeClass)%3B%20%0D%0A%20%20%20%20%20%20%20%20domtab.changeTab(document.getElementById(id)%2C1)%3B%20%0D%0A%20%20%20%20%20%20%20%20document.getElementById(id).focus()%3B%20%0D%0A%20%20%20%20%20%20%20%20domtab.cancelClick(e)%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%2F*%20helper%20methods%20*%2F%20%0D%0A%20%20%20%20getTarget%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20target%20%3D%20window.event%20%3F%20window.event.srcElement%20%3A%20e%20%3F%20e.target%20%3A%20null%3B%20%0D%0A%20%20%20%20%20%20%20%20if%20(!target)%7Breturn%20false%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20if%20(target.nodeName.toLowerCase()%20!%3D%20'a')%7Btarget%20%3D%20target.parentNode%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20target%3B%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20cancelClick%3Afunction(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(window.event)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20window.event.cancelBubble%20%3D%20true%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20window.event.returnValue%20%3D%20false%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20if%20(e)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20e.stopPropagation()%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20e.preventDefault()%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20addEvent%3A%20function(elm%2C%20evType%2C%20fn%2C%20useCapture)%7B%20%0D%0A%20%20%20%20%20%20%20%20if%20(elm.addEventListener)%20%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20elm.addEventListener(evType%2C%20fn%2C%20useCapture)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20true%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20else%20if%20(elm.attachEvent)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20r%20%3D%20elm.attachEvent('on'%20%2B%20evType%2C%20fn)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20r%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20else%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20elm%5B'on'%20%2B%20evType%5D%20%3D%20fn%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20cssjs%3Afunction(a%2Co%2Cc1%2Cc2)%7B%20%0D%0A%20%20%20%20%20%20%20%20switch%20(a)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'swap'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20o.className%3D!domtab.cssjs('check'%2Co%2Cc1)%3Fo.className.replace(c2%2Cc1)%3Ao.className.replace(c1%2Cc2)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'add'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(!domtab.cssjs('check'%2Co%2Cc1))%7Bo.className%2B%3Do.className%3F'%20'%2Bc1%3Ac1%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'remove'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20rep%3Do.className.match('%20'%2Bc1)%3F'%20'%2Bc1%3Ac1%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20o.className%3Do.className.replace(rep%2C'')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20case%20'check'%3A%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20found%3Dfalse%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20temparray%3Do.className.split('%20')%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20for(var%20i%3D0%3Bi%3Ctemparray.length%3Bi%2B%2B)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(temparray%5Bi%5D%3D%3Dc1)%7Bfound%3Dtrue%3B%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20found%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0Adomtab.addEvent(window%2C%20'load'%2C%20domtab.init%2C%20false)%3B%20%0D%0A%3C%2Fscript%3E"> <body> <div id="warp"> <div class="domtab doprevnext"> <ul class="domtabs"> <li><a href="#tab1" _ewebeditor_ta_href="%23tab1">PHP/MySQL</a></li> <li><a href="#tab2" _ewebeditor_ta_href="%23tab2">(X)HTML/CSS</a></li> <li><a href="#tab3" _ewebeditor_ta_href="%23tab3">Javascript</a></li> <li><a href="#tab4" _ewebeditor_ta_href="%23tab4">Ajax</a></li> </ul> <h2 class="title">Homr.cn - DIV+CSS小段精华代码</h2> <!-- TAB 1 --> <div> <h2><a name="tab1" id="tab1">PHP</a></h2> <p>PHP（"PHP: Hypertext Preprocessor"，超文本预处理器的字母缩写）是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到 HTML中，尤其适合 web 开发。 </p> <h2><a name="mysql">MySQL</a></h2> <p>MySQL是最流行的开放源码SQL数据库管理系统，它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司，结合了开放源码价值取向、方法和成功的商业模型。</p> <p><a href="#top" _ewebeditor_ta_href="%23top">back to menu</a></p> </div> <!-- TAB 2 --> <div> <h2><a name="tab2" id="tab2">(X)HTML</a></h2> <p>HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。</p> <p>XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。</p> <h2><a name="css">CSS</a></h2> <p>CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。</p> <p><a href="#top" _ewebeditor_ta_href="%23top">back to menu</a></p> </div> <!-- TAB 3 --> <div> <h2><a name="tab3" id="tab3">Javascript</a></h2> <p>JavaScript 是一种新的描述语言，此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。</p> <p><a href="#top" _ewebeditor_ta_href="%23top">back to menu</a></p> </div> <!-- TAB 4 --> <div> <h2><a name="tab4" id="tab4">Ajax</a></h2> <p>AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。</p> <p>这两个 JavaScript 功能 是： <ul> <li>在不重新读取页面的情况下对伺服器送出要求（request）</li> <li>解析、使用 XML 文件</li> </ul> </p> <p><a href="#top" _ewebeditor_ta_href="%23top">back to menu</a></p> </div> </div> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程