最近在看OpenCart中的样式布局的时候学着弄了一个标签页的实现，做完之后才发现jQuery UI中已经有标签页的实现了，实现的方式也大致相同。
下面是我的实现，贴在下面以备未来使用。
HTML页面：
[html] view plaincopy
<!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>Tab Page Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="tabs.js"></script>
</head>
<body>
<div class="tabs">
<div class="tabhost">
<a href="#page1" class="selected">Page 1</a>
<a href="#page2">Page 2</a>
<a href="#page3">Page 3</a>
<a href="#page4">Page 4</a>
<a href="#page5">Page 5</a>
</div>
<div class="tabcontent">
<div id="page1">This is Page 1!</div>
<div id="page2">This is Page 2!</div>
<div id="page3">This is Page 3!</div>
<div id="page4">This is Page 4!</div>
<div id="page5">This is Page 5!</div>
</div>
</div>
</body>
</html>
CSS样式 style.css：
[css] view plaincopy
body, div, a {
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 16px;
}
.tabs {
width: 600px;
margin: 50px auto;
}
.tabhost {
height: 24px;
}
.tabhost a {
text-decoration: none;
background: #f7f7f7;
color: #ed6c07;
padding: 5px;
border-top: #dddddd 1px solid;
border-left: #dddddd 1px solid;
border-right: #dddddd 1px solid;
}
.tabhost a:hover {
background: #ed6c07;
color: #ffffff;
padding-bottom: 6px;
}
.tabhost a.selected {
background: #ffffff;
color: #ed6c07;
padding-bottom: 6px;
}
.tabcontent {
border: 1px #dddddd solid;
height: 600px;
}
jQuery操作 tabs.js：
[javascript] view plaincopy
$(function() {
var tabhosts = $(".tabhost a");
tabhosts.each(function() {
$($(this).attr("href")).hide();
if ($(this).hasClass("selected")) {
$($(this).attr("href")).show();
}
$(this).click(function(event) {
event.preventDefault();
if (!$(this).hasClass("selected")) {
tabhosts.each(function() {
$(this).removeClass("selected");
$($(this).attr("href")).hide();
});
$(this).addClass("selected");
$($(this).attr("href")).show();
}
});
});
});
实现的要点在于：
1. 初始时需要用 jQuery的 hide() 函数将不需要显示的标签页隐藏。（hide() 函数实际上是将元素的属性设置为：style="display: none;"。）
2. 标签采用<a>元素，通过它的 href 属性，结合 jQuery 的选择器来定位标签页元素的 id。
3. 被选中的标签拥有特定的class，“selected”。通过这个class="selected"，结合 jQuery 的hasClass方法来确定哪个标签页该显示。
4. 在 jQuery 的click事件的处理函数中添加参数event，然后在函数体中使用event.preventDefault() 函数，并不会调用DOM本身的event以及event.preventDefault() 函数，而是会调用jQuery提供的preventDefault() 函数，从而达到在不同浏览器中都能阻止浏览器默认操作的目的。这样做的原因是Fire Fox不支持的DOM的event对象，而IE的event又没有preventDefault函数，这就使得单独使用event.preventDefault() 函数只会在Chrome中有效。
