选项卡技术几种方法

1、其中最简单的一种就是排版成选项卡式的样式，点击每一个就是一个页面，当前页面就是当前选项卡，配上几个图片就ok

 

<! 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 > 无标题文档 </ title >
< style  type ="text/css" >
<!--
body  {
    margin-left :  100px ;
    margin-top :  100px ;
    margin-right :  100px ;
    margin-bottom :  100px ;
}
.font1  {
    font-family :  "宋体" ;
    font-size :  12px ;
    line-height :  18px ;
    font-weight :  normal ;
    color :  #666666 ;
    text-decoration :  none ;
}
-->

</ style >
< script  language ="javascript"   >
     var  PubObjs  =  document.getElementsByName( " tagID " );
    
    
     function  SelectObject(SelObj, DefaultClass, SelClass) 
    {
         // alert(SelObj.id);
         // alert(window.event.srcElement.parentElement.parentElement.id);
         var  Objs  =  document.getElementsByName(SelObj.id);
         for ( var  i  =   0 ; i < Objs.length; i ++ )
        {
            Objs[i].className  =  DefaultClass;
        }        
        SelObj.className  =  SelClass;
    }
    
     function  SelectNewObject(SelIndex, DefaultClass, SelClass) 
    {
        CurObj  =  SelIndex;
         for ( var  i  =   0 ; i < 3 ; i ++ )
        {
            if ( i  ==  SelIndex )
            {
               document.getElementById( " Img " + SelIndex).style.cursor  =    " hand " ;
               document.getElementById( " Img " + SelIndex).src  =   " images/Cur_top_ " + SelIndex + " .jpg " ;
            }
             else
            {
                 document.getElementById( " Img " + i).style.cursor  =    " hand " ;
               document.getElementById( " Img " + i).src  =   " images/top_ " + i + " .jpg " ;
            }
        }
    }
    
     var  VarASty  =   "" ;
     var  VarSpanSty  =   "" ;
     var  CurObj  =   0 ;
    
     function  SwitchSty(obj)
    {
        document.getElementById( " Img " + obj).style.cursor  =    " hand " ;
        document.getElementById( " Img " + obj).src  =   " images/Cur_top_ " + obj + " .jpg " ;
    } 
    
     function  SwitchInitSty(obj)
    {
         // alert(obj);
         if (CurObj  !=  obj)
        {
           // document.getElementById("current"+obj).children(0).style.cssText = VarASty;
           // document.getElementById("span"+obj).style.cssText = VarSpanSty;
          document.getElementById( " Img " + obj).style.cursor  =    " hand " ;
          document.getElementById( " Img " + obj).src  =   " images/top_ " + obj + " .jpg " ;
        }
    } 
</ script >
</ head >

< body >
< table  width ="573"  border ="0"  cellspacing ="0"  cellpadding ="0" >
   < tr >
     < td  width ="7"  align ="left"  valign ="top"  bgcolor ="#666666" >< img  src ="images/left.jpg"  width ="8"  height ="35"   /></ td >
     < td  width ="558"  height ="35"  align ="left"  valign ="top"  background ="images/top_05.jpg"  bgcolor ="#333333" >
    
     < table  width ="558"  height ="35"  border ="0"  cellpadding ="0"  cellspacing ="0" >
       < tr >
         < td  width ="126"  align ="left"  valign ="bottom" > &nbsp; </ td >
         < td  width ="89"  align ="left"  valign ="bottom" >< a  onmouseover ="SwitchSty(0)"  onmouseout ="SwitchInitSty(0)"   href ="System_Set_Main.htm"   target ="main"  onClick ="SelectNewObject(0, 'Normal', 'Selected')" >< img  id ="Img0"  src ="images/Cur_top_0.jpg"  width ="89"  height ="28"  border ="0"   /></ a ></ td >
         < td  width ="89"  align ="left"  valign ="bottom" >< a  onmouseover ="SwitchSty(1)"  onmouseout ="SwitchInitSty(1)"  href ="Admin_Mrg_Main.htm"   target ="main"  onClick ="SelectNewObject(1, 'Normal', 'Selected')" >< img  id ="Img1"  src ="images/top_1.jpg"  width ="89"  height ="28"  border ="0"   /></ a ></ td >
         < td  width ="89"  align ="left"  valign ="bottom" >< a  onmouseover ="SwitchSty(2)"  onmouseout ="SwitchInitSty(2)"  href ="User_Mgr_Main.htm"   target ="main"  onClick ="SelectNewObject(2, 'Normal', 'Selected')" >< img  id ="Img2"  src ="images/top_2.jpg"  width ="89"  height ="28"  border ="0" /></ a ></ td >
         < td  align ="left"  valign ="bottom" > &nbsp; </ td >
       </ tr >
     </ table >
    
     </ td >
     < td  width ="7"  align ="left"  valign ="top" >< img  src ="images/right.jpg"  width ="7"  height ="35"   /></ td >
   </ tr >
   < tr >
     < td  colspan ="3"  align ="left"  valign ="top"  background ="images/backgrund.jpg" >
    
    sdsf'sdfsfsdf
    
    
    sdffsdfksdfps
    
    
     </ td >
   </ tr >
   < tr >
     < td  height ="6"  align ="left"  valign ="top" >< img  src ="images/down_28.jpg"  width ="7"  height ="6"   /></ td >
     < td  height ="6"  align ="left"  valign ="top"  background ="images/down_30.jpg" ></ td >
     < td  height ="6"  align ="left"  valign ="top" >< img  src ="images/down_32.jpg"  width ="7"  height ="6"   /></ td >
   </ tr >
</ table >
</ body >
</ html >

 2、第二种就是学习csdn后台这样的

 

<! 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 >
< style  type ="text/css" >
    * {
 margin : 0px ;
 padding : 0px ;
  }
#tabsF  {
 float : left ;
 width : 100% ;
 font-size : 12px ;
 line-height : 30px ;
  /* border-bottom:2px solid #666; */
 margin-top : 5px ;
}
#tabsF ul  {
 margin : 0 ;
 padding : 0px 10px 0px 50px ;
 list-style : none ;
}
#tabsF li  {
 display : inline ;
 margin : 0 ;
 padding : 0 ;
  }
#tabsF a  {
 float : left ;
 background :  transparent url("../images/Top/Nav_9.gif") no-repeat left top ;
 margin : 0 ;
 padding : 0 0 0 3px ;
 text-decoration : none ;
}
#tabsF a span  {
 float : left ;
 display : block ;
 margin : 0 ;
 background :  transparent url("../images/Top/Nav_9.gif") no-repeat right top ;
 padding : 6px 15px 0px 10px ;
}

/*  Commented Backslash Hack hides rule from IE5-Mac  */
    #tabsF a span  { float : none ; }
    #tabsF a span  { background-position : 100% 0px ; }
/*  End IE5-Mac hack  */
#tabsF a:hover span  { color : #000 ; }
/* #tabsF a:hover {background-position:0% -42px;}
#tabsF a:hover span {background-position:100% -42px;}
#tabsF #current a {background-position:0% -42px;}
#tabsF #current a span {background-position:100% -42px;}
*/
#tabsF a:hover  {  background :  transparent url("../images/Top/Nav_1.gif") no-repeat left top ; background-position : 0% 0px ; }
#tabsF a:hover span  { background :  transparent url("../images/Top/Nav_2.gif") no-repeat right top ; background-position : 100% 0px ; }

#tabsF #current a  { background :  transparent url("../images/Top/Nav_1.gif") no-repeat left top ; }
#tabsF #current a span  {  background :  transparent url("../images/Top/Nav_2.gif") no-repeat right top ; }

#tabsF #current a  { background-position : 0% 0px ; }
#tabsF #current a span  { background-position : 100% 0px ; }
</ style >
</ head >
< body >

< div  id ="tabsF" >
< span  id ="ctl00_menu" ></ span >< ul >< li  id ="current" >< a  href ="Default.aspx" >< span > 后台首页 </ span ></ a ></ li >< li >< a  href ="PostList.aspx" >< span > 管理文章 </ span ></ a ></ li >< li >< a  href ="PostEdit.aspx" >< span > 写新文章 </ span ></ a ></ li >< li >< a  href ="ArticleList.aspx" >< span > 收藏 </ span ></ a ></ li >< li >< a  href ="AdminGroups.aspx" >< span > 圈子 </ span ></ a ></ li >< li >< a  href ="Feedback.aspx" >< span > 评论 </ span ></ a ></ li >< li >< a  href ="EditLinks.aspx" >< span > 链接 </ span ></ a ></ li >< li >< a  href ="EditGalleries.aspx" >< span > 相册 </ span ></ a ></ li >< li >< a  href ="EditKeywords.aspx" >< span > 关键字 </ span ></ a ></ li >< li >< a  href ="Referrers.aspx" >< span > 访问来源 </ span ></ a ></ li >< li >< a  href ="Configure.aspx" >< span > 配置 </ span ></ a ></ li >< li >< a  href ="Preferences.aspx" >< span > 参数选择 </ span ></ a ></ li >< li >< a  href ="http://hi.youkuaiyun.com" >< span > 个人空间 </ span ></ a ></ li ></ ul >
</ div >



< TABLE   cellSpacing ="0"  cellPadding ="0"  width ="400"  border ="0" >
< TR >< TD  style ="font-family:黑体;width:1%;"  nowrap > 学校要闻回顾 </ TD >< TD > &nbsp; </ TD ></ TR >
< TR >< TD  bgcolor ="#0232B8"  height ="2px" ></ TD >< TD  bgcolor ="#0232B8"   ></ TD ></ TR ></ TABLE >


</ body >
</ html >

 

有几张图片就可以实现了。