tab选项卡实例

 

效果图：

<! 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 >