<!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">
ul,li{ margin:0; padding:0;}
.tabBox{ width:268px; margin:20px;}
ul.tabTag{ height:28px;border-bottom:1px solid #000;list-style:none}
ul.tabTag li{ float:left; line-height:27px; height:27px; padding:0 18px;color:#ccc; border:1px solid #ccc; border-bottom:none; margin-right:5px; background:#fff;cursor:pointer; }
ul.tabTag li.active{ border-color:#000;background:#eee;color:red;position:relative;top:1px;}
.tabCon{ border:1px solid #000;border-top:none;background:#fff;}
.tCon{ display:none; background:#eee; padding:25px;}
</style>
<script type="text/javascript">
/*
函数功能:实现tab菜单
tabMenu(tabBox,navClass);
参数一:tabBox (tab容器id)
参数二:navClass (当前标签样式class)
备注:依赖指定html结构
*/
function tabMenu(tabBox,navClass){
var tabNavLi=document.getElementById(tabBox).getElementsByTagName("ul")[0].getElementsByTagName("li");
var tabCon=document.getElementById(tabBox).getElementsByTagName("div")[0].getElementsByTagName("div");
var tabLens=tabCon.length;
for(var i=0;i<tabLens;i++){
//应用js闭包传入参数i作为当前索引值赋值给m
(function(m){
tabNavLi[m].onmouseover = function(){
for(var j=0; j<tabLens; j++){
tabNavLi[j].className = (j==m)?navClass:"";
tabCon[j].style.display = (j==m)?"block":"";
}
}
})(i);
}
}
//函数调用
window.onload=function(){
tabMenu("tabBox1","active");
tabMenu("tabBox2","active");
}
</script>
</head>
<body>
<!--demo1-->
<div id="tabBox1" class="tabBox">
<ul class="tabTag">
<li class="active">新闻</li>
<li>体育</li>
<li>财经</li>
</ul>
<div class="tabCon">
<div class="tCon" style="display:block">新闻新闻新闻</div>
<div class="tCon">体育体育体育</div>
<div class="tCon">财经财经财经</div>
</div>
</div>
<!--demo2-->
<div id="tabBox2" class="tabBox">
<ul class="tabTag">
<li class="active">新闻</li>
<li>体育</li>
<li>财经</li>
</ul>
<div class="tabCon">
<div class="tCon" style="display:block">新闻新闻新闻</div>
<div class="tCon">体育体育体育</div>
<div class="tCon">财经财经财经</div>
</div>
</div>
</body>
</html>