效果图：
<!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=gb2312" />
<title>tab测试</title>
</style><script type="text/javascript">
<!--
function tab (mod,cursor,n){
for(i=1;i<=n;i++){
var tab=document.getElementById(mod+i);
var cont=document.getElementById(mod+"_"+"cont"+i);
tab.className=(i==cursor)?"current":"";
cont.style.display=(i==cursor)?"block":"none";
}
}
//-->
</script>
<style type="text/css">
html,body
{
font-size:13px;
color:#000;
}
div,ul,li
{
margin:0px;
padding:0px;
}
.clearboth
{
clear:both;
height:0px;
line-height:0px;
}
ul.tabs,.con ul
{
list-style-type:none;
}
ul.tabs li
{
float:left;
border:1px #000 solid;
border-bottom:0px;
cursor:pointer;
margin-left:3px;
padding:3px;
}
.tabs
{
width:380px;
border-bottom:1px solid #000000;
width:380px;
margin-top:6px;
clear:both;
/* border:1px #000000 solid;*/
border-top:0px;
.current
{
color:#FF0000;
background-color:#FFFFCC;
}
</style>
</head> <body>
<ul class="tabs">
<li class="current" id="tab1" onclick="tab('tab',1,2)">24小时军火排行 </li>
<li id="tab2" onclick="tab('tab',2,2)">一周军火排行 </li>
</ul>
<div class="con">
<div id="tab_cont1">
<ul>
<li class="n1"><a href="#">美军报告称大陆对台作战可能使用闪电战封锁战</a> </li>
<li class="n2"><a href="#">揭秘美制悍马军用越野车发展史(组图)</a> </li>
<li class="n3"><a href="#">俄罗斯拟新建至少6艘核潜艇 首艘2011年服役</a> </li>
<li class="n4"><a href="#">俄媒体称中国陆空军战斗力已压倒俄军(组图)</a> </li>
<li class="n5"><a href="#">抓拍：你绝没见过朝鲜女兵的另一面(组图)</a> </li>
<li class="n6"><a href="#">二战盟军靠剃须刀让德军制导炸弹偏离目标</a> </li>
<li class="n7"><a href="#">空军中校追小偷遭四人殴打 围观群众无人相助</a> </li>
<li class="n8"><a href="#">美研究中国空军软肋:最优飞行学员不下部队</a> </li>
<li class="n9"><a href="#">俄军加强战术核武器 不放弃海基战略核力量</a> </li>
<li class="n10"><a href="#">朝鲜发射卫星有几种结局 受到制裁难以避免</a> </li>
</ul>
</div>
<div class="hidden" id="tab_cont2">
<ul>
<li class="n1"><a href="#">揭秘美制悍马军用越野车发展史(组图)</a> </li>
<li class="n2"><a href="#">俄媒体称中国陆空军战斗力已压倒俄军(组图)</a> </li>
<li class="n3"><a href="#">抓拍：你绝没见过朝鲜女兵的另一面(组图)</a> </li>
<li class="n4"><a href="#">二战盟军靠剃须刀让德军制导炸弹偏离目标</a> </li>
<li class="n5"><a href="#">空军中校追小偷遭四人殴打 围观群众无人相助</a> </li>
<li class="n6"><a href="#">朝鲜发射卫星有几种结局 受到制裁难以避免</a> </li>
<li class="n7"><a href="#">实拍表情极其严肃的朝鲜人民军女哨兵(图)</a> </li>
<li class="n8"><a href="#">日自卫队正脱离专守防卫限制 谋划出兵阿富汗</a> </li>
<li class="n9"><a href="#">美国称中国去年已部署新型洲际弹道导弹(图)</a> </li>
<li class="n10"><a href="#">俄称中国歼11B雷达反射面只有3-5平方米(组图)</a> </li>
</ul>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tab测试</title>
</style><script type="text/javascript">
<!--
function tab (mod,cursor,n){
for(i=1;i<=n;i++){
var tab=document.getElementById(mod+i);
var cont=document.getElementById(mod+"_"+"cont"+i);
tab.className=(i==cursor)?"current":"";
cont.style.display=(i==cursor)?"block":"none";
}
}
//-->
</script>
<style type="text/css">
html,body
{
font-size:13px;
color:#000;
}
div,ul,li
{
margin:0px;
padding:0px;
}
.clearboth
{
clear:both;
height:0px;
line-height:0px;
}
ul.tabs,.con ul
{
list-style-type:none;
}
ul.tabs li
{
float:left;
border:1px #000 solid;
border-bottom:0px;
cursor:pointer;
margin-left:3px;
padding:3px;
}
.tabs
{
width:380px;
border-bottom:1px solid #000000;
}
.con
width:380px;
margin-top:6px;
clear:both;
/* border:1px #000000 solid;*/
border-top:0px;
}
.current
{
color:#FF0000;
background-color:#FFFFCC;
}
</style>
</head> <body>
<ul class="tabs">
<li class="current" id="tab1" onclick="tab('tab',1,2)">24小时军火排行 </li>
<li id="tab2" onclick="tab('tab',2,2)">一周军火排行 </li>
</ul>
<div class="con">
<div id="tab_cont1">
<ul>
<li class="n1"><a href="#">美军报告称大陆对台作战可能使用闪电战封锁战</a> </li>
<li class="n2"><a href="#">揭秘美制悍马军用越野车发展史(组图)</a> </li>
<li class="n3"><a href="#">俄罗斯拟新建至少6艘核潜艇 首艘2011年服役</a> </li>
<li class="n4"><a href="#">俄媒体称中国陆空军战斗力已压倒俄军(组图)</a> </li>
<li class="n5"><a href="#">抓拍：你绝没见过朝鲜女兵的另一面(组图)</a> </li>
<li class="n6"><a href="#">二战盟军靠剃须刀让德军制导炸弹偏离目标</a> </li>
<li class="n7"><a href="#">空军中校追小偷遭四人殴打 围观群众无人相助</a> </li>
<li class="n8"><a href="#">美研究中国空军软肋:最优飞行学员不下部队</a> </li>
<li class="n9"><a href="#">俄军加强战术核武器 不放弃海基战略核力量</a> </li>
<li class="n10"><a href="#">朝鲜发射卫星有几种结局 受到制裁难以避免</a> </li>
</ul>
</div>
<div class="hidden" id="tab_cont2">
<ul>
<li class="n1"><a href="#">揭秘美制悍马军用越野车发展史(组图)</a> </li>
<li class="n2"><a href="#">俄媒体称中国陆空军战斗力已压倒俄军(组图)</a> </li>
<li class="n3"><a href="#">抓拍：你绝没见过朝鲜女兵的另一面(组图)</a> </li>
<li class="n4"><a href="#">二战盟军靠剃须刀让德军制导炸弹偏离目标</a> </li>
<li class="n5"><a href="#">空军中校追小偷遭四人殴打 围观群众无人相助</a> </li>
<li class="n6"><a href="#">朝鲜发射卫星有几种结局 受到制裁难以避免</a> </li>
<li class="n7"><a href="#">实拍表情极其严肃的朝鲜人民军女哨兵(图)</a> </li>
<li class="n8"><a href="#">日自卫队正脱离专守防卫限制 谋划出兵阿富汗</a> </li>
<li class="n9"><a href="#">美国称中国去年已部署新型洲际弹道导弹(图)</a> </li>
<li class="n10"><a href="#">俄称中国歼11B雷达反射面只有3-5平方米(组图)</a> </li>
</ul>
</div>
</div>
</body>
</html>