点击下面的链接来看看标签页式网页的动态效果。
See JavaScript tabs in action
用这种方式编写的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事件：
接着是函数本身：
-
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事件中指定了此函数。
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!
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽，造成漏登，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。
