网页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 class="tab">
<ul class="clearfix">
    <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 class="ct" style="clear:both;">
    <p>内容1 </p>
    <p>内容1</p>
    </div>
    <div class="ct">
    <p>内容2 </p>
    <p>内容2</p>
    </div>
    <div class="ct">
    <p>内容3 </p>
    <p>内容3</p>
    </div>
    <div class="ct">
    <p>内容4 </p>
    <p>内容4</p>
    </div>
    <div class="ct">
    <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>

下面的代码讲JavaScript与HTML代码混杂在一起，可读性稍微差一点：

#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>
<script type="text/javascript">
function showct(value)
{
for(var i=1;i<6;i++)
{
  document.getElementById("ct"+i).style.display = "none";
}
document.getElementById(value).style.display = "block";
}
</script>
</head>