如何在越来越显得狭小的页面空间上显示更多内容？相信很多人立即想到的就是标签页（TAB），她允许在同一个地方显示多个内容。标签页有很多种制作方法，本文介绍的是 Christian Heilmann 写的 DOMTab。
--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
Javascript:
示例代码：
HTML:
DOMTab 的页面样式完全由 css 控制，你可以通过在样式为 domtab 的 DIV 上添加一个 doprevnext 样式来生成前后跳转链接：
HTML:
官方网站：
http://onlinetools.org/tools/domtabdata/
--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
Javascript:
-
-
/*
-
DOMtab Version 3.1415927
-
Updated March the First 2006
-
written by Christian Heilmann
-
check blog for updates: http://www.wait-till-i.com
-
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
);
-
示例代码：
HTML:
-
-
<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: 2px;
-
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: 2px;
-
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>
-
-
<script type="text/javascript" src="js/domtab.js">
</script>
-
-
<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">Codebit.cn - 聚合小段精华代码
</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">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">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">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">back to menu
</a>
</p>
-
-
</div>
-
-
</div>
-
-
</div>
-
DOMTab 的页面样式完全由 css 控制，你可以通过在样式为 domtab 的 DIV 上添加一个 doprevnext 样式来生成前后跳转链接：
HTML:
-
-
<ul class="prevnext">
-
<li class="prev">
<a href="#">previous
</a>
</li>
-
<li class="next">
<a href="#">next
</a>
</li>
-
</ul>
-
官方网站：
http://onlinetools.org/tools/domtabdata/
550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
