这篇教程介绍了如何构建一个由javascript驱动的标签页式网页。每一个标签页都会在点击之后呈现大量独立的内容-当你的页面需要展示众多内容的时候这是一个完美的选择。在处理多步骤的网页表格（“向导”之类）时也是一个相当不错的方案。
javascript tab ：轻松构建标签页式网页。
作者: Matt Doyle 翻译：ZackPn
点击下面的链接来看看标签页式网页的动态效果。
用这种方式编写的JavaScript和标记语言在不支持JavaScript的浏览器中会平稳退化。
通过这篇教程，你将了解如何将这些标签页融合在一起。接着你就可以构建自己的标签页式网页啦。让我们开始吧！
标签页式网页的HTML
标签和内容的HTML十分简单：为每一篇内容创建一个div元素,类名为tabContent,然后设置一个独立的id指向这个div。这是三个标签页的第一个的例子。
<div class="tabContent" id="about">
<h2>About JavaScript tabs</h2>
<div>
<p>JavaScript tabs partition your Web page content into tabbed section. Only one section at a time is visible.<p>
<p>The code is written in such a way that the page degrades gracefully in browsers that don't support JavaScript or CSS,<p>
</div>
</h2>
</div>
标签就是一个简单的无序列表。
<ul id="tabs"> <li><a href="#about">About JavaScript tabs</a></li> <li><a href="#advantages">Advantages of tabs</a></li> <li><a href="#usage">Using tabs</a></li> </ul>
设置ul元素id=“tabs"好让JavaScript能够定位到它。列表中的链接通过指向div的id（”about","advantages","usage")来链接到内容的div。因为是标注的HTML，所以即使没有JavaScript也能正常运行。
情报：
可以添加任意多个标签页。只需要给新的内容添加div并设置一个独特的id，然后再列表中添加一个链接就好了。
标签页式网页的CSS
为了让标签看起来更像是真的标签（并且更好看）：
body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }
这些CSS规则如下：
body 为页面设置字体和字体大小
ul#tabs 为标签列表添加样式，避免点句
ul#tabs li display:inline;属性让标签可以跨页面展示
ul#tabs li a 为列表中的链接添加样式。每个链接都有一个无底的border，这样被激活的标签就 会完美的和内容衔接在一起。
ul#tabs li a:hover 高亮显示鼠标悬浮的标签
ul#tabs li a.selected 通过设置浅色背景、粗体文字和让它更大一点来为选中的标签添加样式。注意底部的 padding增加至0.38已确保标签和内容完美衔接
div.tabContent 为标签内容区域添加样式来匹配标签的风格
div.tabContent.hide 用来隐藏未选择的标签
标签页式网页的JavaScript代码
显然，最后你需要一些javascript代码来式标签页正常运行。javascript需要做到：
1.在事件处理程序中为每一个标签链接添加一个showTab( ) onclick
2.隐藏除第一个div的之外其它所有div的内容，当页面加载之后，只有最左边的标签内容可见。
3.当一个标签本点击之后，showTab()呈现该标签页中的内容，并且隐藏其它所有标签的div。同时也将高亮该标签并淡化其它标签。
JavaScript通过两个数组来承载tab link 元素和内容的div:
var tabLinks = new Array(); var contentDivs = new Array();
四个函数控制这些标签：
- init()初始化标签。
- showTab()展示点击后的标签内容并高亮该标签
- getFirstChildWithTagName()是一个十分有帮助的函数，它通过指定元素标签名来恢复该标签的第一个子元素。
- getHash()是另一个简单但十分有帮助的函数，它获取链接并且可以返回hash(#)标志之后的不完整链接。
下面介绍这些函数的工作方式。
init()函数
init()是第一条函数同时也是最复杂的函数。它在页面加载完成之后被调用。多亏了body元素的onload事件：
<body onload="init()">
接着是函数本身：
function init() {
// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}
// Hide all content divs except the first
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}
这个函数做了三件事：
- 在无序tabs列表中循环。它在每一个li元素中调用getFirstChildWithTagName()函数来获取link元素。然后调用geHash()函数来获取hash（#）之后的链接；该链接即是相应内容的div id。然后将链接元素通过ID保存在tabLink数组中，通过ID将内容div保存在contentDivs数组中。
- 为每一个tab链接指定了一个onclick事件，同时也通过设置第一个标签的CSS class=“selected"使其高亮。
- 通过设置div的CSS class为"tabContent hide"隐藏除第一个之外的所有内容。
因此init（）应在页面加载完毕后立即运行，确保你在body元素的onload事件中指定了此函数。
<body onload="init()">
showTab()函数
showTab（）将在标签链接被点击时调用。它会高亮被点击中的标签并显示该标签下的内容。同时淡化剩余标签并隐藏其它内容：
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
// Stop the browser following the link
return false;
}
函数将从被点击标签的href属性中提取选中的ID并保存在selectedId中。然后在所有ID中循环。它将高亮选中的ID相应得标签和内容同时淡化其余标签并隐藏对应的内容。所有这些都通过设置tab链接和内容div来实现的。
最后函数将返回false以避免浏览器新加载被点击的链接和保存该链接为历史记录。
getFirsChildWithTagName()函数
此函数通过指定标签名返回相匹配元素的第一个子元素。init（）函数将通过调用此函数获取tabs列表中每一个列表项的a(链接）元素。
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}
这个函数将在元素的子节点循环直到找到与tagname相匹配的节点，然后返回这个节点（node）。
情报：
在Looking inside DOM page elements中了解什么是childNodes和nodeName属性。
getHash（）函数
此函数返回链接在hash标志之后的部分。被init（）和showTab（）函数用来获取tab链接的内容div 的ID。
function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}
将它们融为一体
所有这些都是为了构建JavaScript驱动的标签页！再看一眼demo并看一看页面源码，了解清楚HTML,CSS和JavaScript是以怎样的方式呈现在页面中的。
>>CSS和JavaScript被放在head元素中。（如果你乐意，也可以放在单独的.css和.js文件中。）
>>body元素包含了onload事件处理程序好触发init（）函数。
>>每一个标签都写一个独立的div并设置一个独一无二的id（会在相应的tab链接中被引用）。
在你的页面中尽情使用这些代码。Happy tabbing!
via:http://www.elated.com/articles/javascript-tabs/