點擊下面的鏈接來看看標簽頁式網頁的動態效果。
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!
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
