<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body {
font-size: 80%;
font-family: "Lucida Sans Unicode", "Lucida Grande", 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.hide {
display: none;
}
</style>
<script type="text/javascript">
var tabLinks = new Array();
var contentDivs =new Array();
function init(){
//Grab the tab links and content div from the page
var tabListItems = document.getElementById('tabs').childNodes;
for (var i = 0; i < tabListItems.length; i++) {
if (tabListItems[i].nodeName == 'LI') {
//Grab a elements
var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
//Grab id properties
var id = getHash(tabLink.getAttribute('href'));
//Grab the tabs links
tabLinks[id] = tabLink;
//Grab div contents
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 = 'hide';
i++;
}
}
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 = 'hide';
}
}
//Stop the browser following the link
return false;
}
function getFirstChildWithTagName(element, tagName){
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeName == tagName)
return element.childNodes[i];
}
}
function getHash(url){
var hashPos = url.lastIndexOf('#');
return url.substring(hashPos + 1);
}
window.onload = init;
</script>
</head>
<body>
<ul id="tabs">
<li>
<a href="#about">About Javascript</a>
</li>
<li>
<a href="#advantages">Advantages of tabs</a>
</li>
<li>
<a href="#usage">Using tabs</a>
</li>
</ul>
<div class="tabContent" id="about">
<h2>1111111111111</h2>
<div>
<p>
JavaScript tabs partition your Web page content into tabbed sections. 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>
</div>
<div class="tabContent" id="advantages">
<h2>22222222</h2>
<div>
<p>
JavaScript tabs partition your Web page content into tabbed sections. 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>
</div>
<div class="tabContent" id="usage">
<h2>333333333333</h2>
<div>
<p>
JavaScript tabs partition your Web page content into tabbed sections. 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>
</div>
</body>
</html>
