效果图:
<!
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 ;
}
.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 >
< 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 >