Jquery 实现Tab效果(转载)

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title ></ title >

     < script  src ="Public/jquery.js"  type ="text/javascript" ></ script >

     < style  type ="text/css" >
        .tab
         {
            background-color :  #FAFAFA ;
            margin :  5px 8px ;
            padding :  5px 10px ;
         }
        .tab p span
         {
            background-color :  #EFEFEF ;
            border :  1px solid #CCCCCC ;
            cursor :  pointer ;
            margin-right :  6px ;
            padding :  2px 5px ;
         }
        .tab p span.current
         {
            background-color :  #FAFAFA ;
            border-bottom-color :  #fafafa ;
         }
        .tab p
         {
            border-bottom :  1px solid #CCCCCC ;
            font-weight :  bold ;
            padding :  0 10px 2px ;
         }
        .tab li
         {
            border-bottom :  1px dotted #CCCCCC ;
            padding-bottom :  3px ;
            margin :  5px 0 ;
         }
        .tab .mhot, .tab.allhot
         {
            display :  none ;
         }
     </ style >

     < script  type ="text/javascript" >
        $(document).ready( function () {
            $( " .tab span:first " ).addClass( " current " );  // 为第一个SPAN添加当前效果样式
            $( " .tab ul:not(:first) " ).hide();  // 隐藏其它的UL
            $( " .tab span " ).mouseover( function () {
                $( " .tab span " ).removeClass( " current " );  // 去掉所有SPAN的样式
                $( this ).addClass( " current " );
                $( " .tab ul " ).hide();
                $( " . "   +  $( this ).attr( " id " )).fadeIn( ' slow ' );
            });
        });
     </ script >
</ head >
< body >
     < div  class ="tab" >
         < p >
             < span  id ="tab1" > tab1 </ span >   < span  id ="tab2" > tab2 </ span >   < span  id ="tab3" > tab3 </ span ></ p >
         < ul  class ="tab1" >
             < li > 我和我的祖国 </ li >< li > 最爱的地方 </ li >< li > 我和我 </ li ></ ul >
         < ul  class ="tab2" >
             < li > 一花一世办 </ li >< li > 一草一天堂 </ li ></ ul >
         < ul  class ="tab3" >
             < li > 阿里巴巴 </ li >< li > 阿里巴巴 </ li >< li > 一草一天堂 </ li >< li > 我和我的祖国 </ li >< li > 最爱的地方 </ li ></ ul >
     </ div >
</ body >
</ html >
转自: http://www.cnblogs.com/jeep/archive/2010/03/02/1676819.html

转载于:https://www.cnblogs.com/johnwonder/archive/2010/03/03/1676951.html