搜狐的滑动门效果代码

<! 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=utf-8"   />
< title > 无标题文档 </ title >
< style  type ="text/css" >
<!--
body {  margin : 0 ;  padding : 0 ;  border : 0 ;  font : 12px "宋体" }
div,ul,li {  margin : 0 ;  padding : 0 ;  border : 0 }
li {  list-style : none }
.tab {  float : left ; background : url(http://bbs.blueidea.com/attachment.php?aid=77070&noupdate=yes)  120px 0 repeat-y ; height : 182px ;  overflow : auto  }
.tab li {  width : 108px ;  height : 30px ;  line-height : 30px ; margin-bottom : 9px ;  padding-left : 13px }
.tabNomorl {  background : url(http://bbs.blueidea.com/attachment.php?aid=77070&noupdate=yes) -1px 0 no-repeat ;  cursor : pointer }
.tabHover {  background : url(http://bbs.blueidea.com/attachment.php?aid=77070&noupdate=yes) -1px -29px no-repeat }
.box {  float : left ;  width : 410px ;  height : 160px ;  border : 1px solid #FAB208 ;  border-left : none ;  padding : 10px }
-->
</ style >
< script  type ="text/javascript" >
// <![CDATA[
function  getNextElement(obj) {
     var  result  =  obj.nextSibling;
     while  ( ! result.tagName) {
        result  =  result.nextSibling;
    }
     return  result;
}
function  tab(obj,index) {
     var  index  =  index  -   1 ;
     var  tabobj  =  document.getElementById(obj);
     var  tablist  =  tabobj.getElementsByTagName( " LI " );
    
     var  boxobj  =  getNextElement(tabobj);
     var  boxlist  =  boxobj.getElementsByTagName( " DIV " );
    
     for  ( var  i = 0 ; i < tablist.length; i ++ ) {
         var  cname,ds;
         if   (i  ==  index) {
            cname  =    " tabHover " ;
            ds  =   " block " ;
        }  else  {
            cname  =    " tabNomorl " ;
            ds  =   " none " ;    
        }
        boxlist[i].style.display  =  ds;
        tablist[i].className  =  cname;
        tablist[i].i  =  i;
        tablist[i].onclick  =   function () {
            tabclick( this .i);
        }
        
         function  tabclick(j) {
            tablist[index].className  =   " tabNomorl " ;
            boxlist[index].style.display  =   " none " ;    
            tablist[j].className  =   " tabHover " ;
            boxlist[j].style.display  =   " block " ;
            index  =  j;
        }
    }
}
window.onload  =   function () {
     new  tab( " tab1 " , 2 );
     new  tab( " tab2 " , 3 );
}
// ]]>
</ script >
</ head >
< body >
< div  style ="margin:30px; height:auto;overflow:auto" >
   < ul  id ="tab1"  class ="tab" >
     < li > 匹配度1 </ li >
     < li > 匹配度2 </ li >
     < li > 匹配度3 </ li >
     < li > 匹配度4 </ li >
   </ ul >
   < div  class ="box" >
     < div > 匹配度1 </ div >
     < div > 匹配度2 </ div >
     < div > 匹配度3 </ div >
     < div > 匹配度4 </ div >
   </ div >
</ div >
< div  style ="padding:60px; height:900px" >
   < ul  id ="tab2"  class ="tab" >
     < li > 匹配度1 </ li >
     < li > 匹配度2 </ li >
     < li > 匹配度3 </ li >
     < li > 匹配度4 </ li >
   </ ul >
   < div  class ="box" >
     < div > 匹配度1 </ div >
     < div > 匹配度2 </ div >
     < div > 匹配度3 </ div >
     < div > 匹配度4 </ div >
   </ div >
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/chen79/archive/2008/01/21/1047219.html