用javascript实现的不错的一款网页选项卡- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用javascript实现的不错的一款网页选项卡

Javascript: 动态生成select选项全接触; 不刷新页面动态更新select选项，实现两个select相互操作; 网页输入框日期型有效性判定一网打尽; 实用Javascript函数之一(自动将输入文本框中的内容转换成大写字符); 实用Javascript函数之二(自动将输入文本框中的内容转换成小写字符); 实用Javascript函数之三(限制文本输入框中只能输入数字\"0\"到\"9\"); 实用Javascript函数之四(用于对sString字符串进行前空格截除); 实用Javascript函数之五(用于对sString字符串进行后空格截除); 实用Javascript函数之六(截除字符串前后空格); 如何使用交替的滚动标题; 采用DOM模型时创建一个Select节点后，要删除option项的解决方法; javascript函数速查; 利用JavaScript和正则表达式进行丰富的日期判断（给其它项目组的代码，有比较好的编程风格和注释）; 关于字符串的几个有用函数; FileSystemObject 的例子（处理驱动器、文件夹、文件）; 用JScript实现VB.Net,C#的[委托Delegate]:; 得到固定字符位置的函数; IE NC通用的藏鼠标右键一法; Menu; foolpot2001菜单

No. « ‹ 3 4 5 6 › »

技术文章搜索

关键字

Javascript 中的用javascript实现的不错的一款网页选项卡

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 76 ::

收藏到网摘: n/a

论坛转贴工具中用到的正则表达式学习正则的好例子摘自百度的图片轮换效果代码

这款选项卡效果，是我见过的一个不错的选项卡效果，不是最好，也是很好的

点击运行可以看到效果:

<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">
</style>
<script>
/* DOMtab Version 3.1415927 Updated March the First 2006 written by Christian Heilmann check blog for updates: <a href="http://www.wait-till-i.com" target="_blank">http://www.wait-till-i.com</a> free to use, not free to resell
*/
domtab={ tabClass:'domtab', // class to trigger tabbing listClass:'domtabs', // class of the menus activeClass:'active', // class of current link contentElements:'div', // elements to loop through backToLinks:/#top/, // pattern to check "back to top" links printID:'domtabprintview', // id of the print all link showAllLinkText:'show all content', // text for the print all link prevNextIndicator:'doprevnext', // class to trigger prev and next links prevNextClass:'prevnext', // class of the prev and next list prevLabel:'previous', // HTML content of the prev link nextLabel:'next', // HTML content of the next link prevClass:'prev', // class for the prev link nextClass:'next', // class for the next link init:function(){ var temp; if(!document.getElementById || !document.createTextNode){return;} var tempelm=document.getElementsByTagName('div'); for(var i=0;i<tempelm.length;i++){ if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;} domtab.initTabMenu(tempelm[i]); domtab.removeBackLinks(tempelm[i]); if(domtab.cssjs('check',tempelm[i],domtab.prevNextIndicator)){ domtab.addPrevNext(tempelm[i]); } domtab.checkURL(); } if(document.getElementById(domtab.printID) && !document.getElementById(domtab.printID).getElementsByTagName('a')[0]){ var newlink=document.createElement('a'); newlink.setAttribute('href','#'); domtab.addEvent(newlink,'click',domtab.showAll,false); newlink.onclick=function(){return false;} // safari hack newlink.appendChild(document.createTextNode(domtab.showAllLinkText)); document.getElementById(domtab.printID).appendChild(newlink); } }, checkURL:function(){ var id; var loc=window.location.toString(); loc=/#/.test(loc)?loc.match(/#(\w.+)/)[1]:''; if(loc==''){return;} var elm=document.getElementById(loc); if(!elm){return;} var parentMenu=elm.parentNode.parentNode.parentNode; parentMenu.currentSection=loc; parentMenu.getElementsByTagName(domtab.contentElements)[0].style.display='none'; domtab.cssjs('remove',parentMenu.getElementsByTagName('a')[0].parentNode,domtab.activeClass); var links=parentMenu.getElementsByTagName('a'); for(i=0;i<links.length;i++){ if(!links[i].getAttribute('href')){continue;} if(!/#/.test(links[i].getAttribute('href').toString())){continue;} id=links[i].href.match(/#(\w.+)/)[1]; if(id==loc){ var cur=links[i].parentNode.parentNode; domtab.cssjs('add',links[i].parentNode,domtab.activeClass); break; } } domtab.changeTab(elm,1); elm.focus(); cur.currentLink=links[i]; cur.currentSection=loc; }, showAll:function(e){ document.getElementById(domtab.printID).parentNode.removeChild(document.getElementById(domtab.printID)); var tempelm=document.getElementsByTagName('div'); for(var i=0;i<tempelm.length;i++){ if(!domtab.cssjs('check',tempelm[i],domtab.tabClass)){continue;} var sec=tempelm[i].getElementsByTagName(domtab.contentElements); for(var j=0;j<sec.length;j++){ sec[j].style.display='block'; } } var tempelm=document.getElementsByTagName('ul'); for(i=0;i<tempelm.length;i++){ if(!domtab.cssjs('check',tempelm[i],domtab.prevNextClass)){continue;} tempelm[i].parentNode.removeChild(tempelm[i]); i--; } domtab.cancelClick(e); }, addPrevNext:function(menu){ var temp; var sections=menu.getElementsByTagName(domtab.contentElements); for(var i=0;i<sections.length;i++){ temp=domtab.createPrevNext(); if(i==0){ temp.removeChild(temp.getElementsByTagName('li')[0]); } if(i==sections.length-1){ temp.removeChild(temp.getElementsByTagName('li')[1]); } temp.i=i; // h4xx0r! temp.menu=menu; sections[i].appendChild(temp); } }, removeBackLinks:function(menu){ var links=menu.getElementsByTagName('a'); for(var i=0;i<links.length;i++){ if(!domtab.backToLinks.test(links[i].href)){continue;} links[i].parentNode.removeChild(links[i]); i--; } }, initTabMenu:function(menu){ var id; var lists=menu.getElementsByTagName('ul'); for(var i=0;i<lists.length;i++){ if(domtab.cssjs('check',lists[i],domtab.listClass)){ var thismenu=lists[i]; break; } } if(!thismenu){return;} thismenu.currentSection=''; thismenu.currentLink=''; var links=thismenu.getElementsByTagName('a'); for(i=0;i<links.length;i++){ if(!/#/.test(links[i].getAttribute('href').toString())){continue;} id=links[i].href.match(/#(\w.+)/)[1]; if(document.getElementById(id)){ domtab.addEvent(links[i],'click',domtab.showTab,false); links[i].onclick=function(){return false;} // safari hack domtab.changeTab(document.getElementById(id),0); } } id=links[0].href.match(/#(\w.+)/)[1]; if(document.getElementById(id)){ domtab.changeTab(document.getElementById(id),1); thismenu.currentSection=id; thismenu.currentLink=links[0]; domtab.cssjs('add',links[0].parentNode,domtab.activeClass); } }, createPrevNext:function(){ // this would be so much easier with innerHTML, darn you standards fetish! var temp=document.createElement('ul'); temp.className=domtab.prevNextClass; temp.appendChild(document.createElement('li')); temp.getElementsByTagName('li')[0].appendChild(document.createElement('a')); temp.getElementsByTagName('a')[0].setAttribute('href','#'); temp.getElementsByTagName('a')[0].innerHTML=domtab.prevLabel; temp.getElementsByTagName('li')[0].className=domtab.prevClass; temp.appendChild(document.createElement('li')); temp.getElementsByTagName('li')[1].appendChild(document.createElement('a')); temp.getElementsByTagName('a')[1].setAttribute('href','#'); temp.getElementsByTagName('a')[1].innerHTML=domtab.nextLabel; temp.getElementsByTagName('li')[1].className=domtab.nextClass; domtab.addEvent(temp.getElementsByTagName('a')[0],'click',domtab.navTabs,false); domtab.addEvent(temp.getElementsByTagName('a')[1],'click',domtab.navTabs,false); // safari fix temp.getElementsByTagName('a')[0].onclick=function(){return false;} temp.getElementsByTagName('a')[1].onclick=function(){return false;} return temp; }, navTabs:function(e){ var li=domtab.getTarget(e); var menu=li.parentNode.parentNode.menu; var count=li.parentNode.parentNode.i; var section=menu.getElementsByTagName(domtab.contentElements); var links=menu.getElementsByTagName('a'); var othercount=(li.parentNode.className==domtab.prevClass)?count-1:count+1; section[count].style.display='none'; domtab.cssjs('remove',links[count].parentNode,domtab.activeClass); section[othercount].style.display='block'; domtab.cssjs('add',links[othercount].parentNode,domtab.activeClass); var parent=links[count].parentNode.parentNode; parent.currentLink=links[othercount]; parent.currentSection=links[othercount].href.match(/#(\w.+)/)[1]; domtab.cancelClick(e); }, changeTab:function(elm,state){ do{ elm=elm.parentNode; } while(elm.nodeName.toLowerCase()!=domtab.contentElements) elm.style.display=state==0?'none':'block'; }, showTab:function(e){ var o=domtab.getTarget(e); if(o.parentNode.parentNode.currentSection!=''){ domtab.changeTab(document.getElementById(o.parentNode.parentNode.currentSection),0); domtab.cssjs('remove',o.parentNode.parentNode.currentLink.parentNode,domtab.activeClass); } var id=o.href.match(/#(\w.+)/)[1]; o.parentNode.parentNode.currentSection=id; o.parentNode.parentNode.currentLink=o; domtab.cssjs('add',o.parentNode,domtab.activeClass); domtab.changeTab(document.getElementById(id),1); document.getElementById(id).focus(); domtab.cancelClick(e); },
/* helper methods */ getTarget:function(e){ var target = window.event ? window.event.srcElement : e ? e.target : null; if (!target){return false;} if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;} return target; }, cancelClick:function(e){ if (window.event){ window.event.cancelBubble = true; window.event.returnValue = false; return; } if (e){ e.stopPropagation(); e.preventDefault(); } }, addEvent: function(elm, evType, fn, useCapture){ if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } }, cssjs:function(a,o,c1,c2){ switch (a){ case 'swap': o.className=!domtab.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2); break; case 'add': if(!domtab.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;} break; case 'remove': var rep=o.className.match(' '+c1)?' '+c1:c1; o.className=o.className.replace(rep,''); break; case 'check': var found=false; var temparray=o.className.split(' '); for(var i=0;i<temparray.length;i++){ if(temparray[i]==c1){found=true;} } return found; break; } }
}
domtab.addEvent(window, 'load', domtab.init, false);
</script>
<body>
<div id="warp"> <div class="domtab doprevnext"> <ul class="domtabs"> <li><a href="#tab1">PHP/MySQL</a></li> <li><a href="#tab2">(X)HTML/CSS</a></li> <li><a href="#tab3">Javascript</a></li> <li><a href="#tab4">Ajax</a></li> </ul> <h2 class="title">Homr.cn - DIV+CSS小段精华代码</h2> <div> <h2><a name="tab1" id="tab1">PHP</a></h2> PHP（“PHP: Hypertext Preprocessor”，超文本预处理器的字母缩写）是一种被广泛应用的开放源代码的多用途脚本语言，它可嵌入到 HTML中，尤其适合 web 开发。 <h2><a name="mysql">MySQL</a></h2> MySQL是最流行的开放源码SQL数据库管理系统，它是由MySQL AB公司开发、发布并支持的。MySQL AB是由多名MySQL开发人创办的一家商业公司。它是一家第二代开放源码公司，结合了开放源码价值取向、方法和成功的商业模型。 <a href="#top">back to menu</a> </div> <div> <h2><a name="tab2" id="tab2">(X)HTML</a></h2> HTML语言是我们建立网页的工具，从它出现发展到现在，规范不断完善，功能越来越强。但是依然有缺陷和不足，人们仍在不断的改进它，使它更加便于控制和有弹性，以适应网络上日新月异的应用需求。2000年底，国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。 XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言，目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。 <h2><a name="css">CSS</a></h2> CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 <a href="#top">back to menu</a> </div> <div> <h2><a name="tab3" id="tab3">Javascript</a></h2> JavaScript 是一种新的描述语言，此一语言可以被嵌入 HTML 的文件之中。透过 JavaScript 可以做到回应使用者的需求事件 (如： form 的输入) 而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的应用程式所处理。 <a href="#top">back to menu</a> </div> <div> <h2><a name="tab4" id="tab4">Ajax</a></h2> AJAX (Asynchronous JavaScript and XML, 异步 JavaScript 及 XML 技术) 是个新词，但内涵是两个存在已有一段时间的 JavaScript 功能。这两种功能以往一直被忽略，在 Gmail、Google suggest 及 Google Maps 出现后才一举成名天下知。 这两个 JavaScript 功能 是： <ul> <li>在不重新读取页面的情况下对伺服器送出要求（request）</li> <li>解析、使用 XML 文件</li> </ul> <a href="#top">back to menu</a> </div> </div>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

论坛转贴工具中用到的正则表达式学习正则的好例子摘自百度的图片轮换效果代码

Javascript 中的 用javascript实现的不错的一款网页选项卡

评论 (0) All

Javascript 中的用javascript实现的不错的一款网页选项卡