网页Tab多种实现

网页Tab有多种方法,下面的代码使用JavaScript实现,同时将JavaScript代码与Html代码分离,可读性较好。

<!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</title>
<style type=”text/css”>
ul, li, p { margin:0; padding:0; }
body { font:12px/1.5em arial; }

.tab { border:1px solid #D5D5D5; }
.tab ul {
list-style:none;
padding:4px 5px 0;
border-bottom:1px solid #ddd;
background:#eee;
}
.tab li {
float:left;
padding:2px 20px 5px;
}
.tab li:hover {
margin-bottom:-1px;  /*用于盖住ul的下边框*/
font-weight:bold;
background:#FFF;
border:1px solid #ddd;
border-bottom:none;
}

.tab li a, .tab li a:visited {
padding:5px 0;
color:#333;
text-decoration:none;
}
.tab li a:hover {
color:#FF0000;
text-decoration:underline;
}

.tab div { padding:10px; }
.tab div p { line-height:2em; }

.clearfix:after {
content: “\20″;
clear: both;
height: 0;
visibility: hidden;
display: block;
}
.clearfix { *zoom:1; }
</style>
</head>

<body>
<div>
<ul>
<li><a href=”#”>公告</a></li>
<li><a href=”#”>规则</a></li>
<li><a href=”#”>论坛</a></li>
<li><a href=”#”>安全中心</a></li>
<li><a href=”#”>公益</a></li>
</ul>
<div style=”clear:both;”>
<p>内容1 </p>
<p>内容1</p>
</div>
<div>
<p>内容2 </p>
<p>内容2</p>
</div>
<div>
<p>内容3 </p>
<p>内容3</p>
</div>
<div>
<p>内容4 </p>
<p>内容4</p>
</div>
<div>
<p>内容5 </p>
<p>内容5</p>
</div>
<script type=”text/javascript”>
document.getElementsByClassName = function () {
var tTagName = “*”;
if (arguments.length > 1) {
tTagName = arguments[1];
}
if (arguments.length > 2) {
var pObj = arguments[2]
}
else {
var pObj = document;
}
var objArr = pObj.getElementsByTagName(tTagName);
var tRObj = new Array();
for (var i = 0; i < objArr.length; i++) {
if (objArr[i].className == arguments[0]) {
tRObj.push(objArr[i]);
}
}
return tRObj;
}
var lia = document.getElementsByTagName(“li”);
var elema = document.getElementsByClassName(“ct”);
for (var i = 0; i < lia.length; i++) {
lia[i].onmouseover = function () {
for (var j = 0; j < elema.length; j++) {
elema[j].style.display = “none”;
}
for (var k = 0; k < lia.length; k++) {
if (this == lia[k])
break;
}
elema[k].style.display = “block”;
}

}
</script>
</div>
</body>
</html>

标签