tab选项卡实例

时间:2022-05-30 19:17:02

 

效果图:

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" >< href ="#" > 美军报告称大陆对台作战可能使用闪电战*战 </ a >   </ li >
        
< li  class ="n2" >< href ="#" > 揭秘美制悍马军用越野车发展史(组图) </ a >   </ li >
        
< li  class ="n3" >< href ="#" > 俄罗斯拟新建至少6艘核潜艇 首艘2011年服役 </ a >   </ li >
        
< li  class ="n4" >< href ="#" > 俄媒体称中国陆空军战斗力已压倒俄军(组图) </ a >   </ li >
        
< li  class ="n5" >< href ="#" > 抓拍:你绝没见过朝鲜女兵的另一面(组图) </ a >   </ li >
        
< li  class ="n6" >< href ="#" > 二战盟军靠剃须刀让德军制导炸弹偏离目标 </ a >   </ li >
        
< li  class ="n7" >< href ="#" > 空军中校追小偷遭四人殴打 围观群众无人相助 </ a >   </ li >
        
< li  class ="n8" >< href ="#" > 美研究中国空军软肋:最优飞行学员不下部队 </ a >   </ li >
        
< li  class ="n9" >< href ="#" > 俄军加强战术核武器 不放弃海基战略核力量 </ a >   </ li >
        
< li  class ="n10" >< href ="#" > 朝鲜发射卫星有几种结局 受到制裁难以避免 </ a >   </ li >
       
</ ul >
  
</ div >   
    
< div  class ="hidden"  id ="tab_cont2" >
        
< ul >
        
< li  class ="n1" >< href ="#" > 揭秘美制悍马军用越野车发展史(组图) </ a >   </ li >
        
< li  class ="n2" >< href ="#" > 俄媒体称中国陆空军战斗力已压倒俄军(组图) </ a >   </ li >
        
< li  class ="n3" >< href ="#" > 抓拍:你绝没见过朝鲜女兵的另一面(组图) </ a >   </ li >
        
< li  class ="n4" >< href ="#" > 二战盟军靠剃须刀让德军制导炸弹偏离目标 </ a >   </ li >
        
< li  class ="n5" >< href ="#" > 空军中校追小偷遭四人殴打 围观群众无人相助 </ a >   </ li >
        
< li  class ="n6" >< href ="#" > 朝鲜发射卫星有几种结局 受到制裁难以避免 </ a >   </ li >
        
< li  class ="n7" >< href ="#" > 实拍表情极其严肃的朝鲜人民军女哨兵(图) </ a >   </ li >
        
< li  class ="n8" >< href ="#" > 日自卫队正脱离专守防卫限制 谋划出兵阿富汗 </ a >   </ li >
        
< li  class ="n9" >< href ="#" > 美国称中国去年已部署新型洲际弹道导弹(图) </ a >   </ li >
        
< li  class ="n10" >< href ="#" > 俄称中国歼11B雷达反射面只有3-5平方米(组图) </ a >   </ li >
      
</ ul >
    
</ div >
  
</ div >
</ body >
</ html >