选项卡点击导航图片改变效果

谁有类似这个网站的http://www.baiduchuan.com效果的代码可以发我一份吗，谢谢！

解决方案 »

  1.   

    <!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><title>实现TabView(页签)效果</title>  
    <meta http-equiv=content-type content="text/html; charset=GBK">  
    <script type="text/javascript">  
    function tabclick(obj){   
        if(obj.className=='cur')return;   
        var idx;   
        for(var n=0; n<obj.parentNode.childNodes.length; n++){   
            obj.parentNode.childNodes[n].className="";   
            if(obj==obj.parentNode.childNodes[n])idx=n;   
        }   
        obj.className="cur";   
        var pc = obj.parentNode.nextSibling;   
        while(pc.nodeType==3)pcpc=pc.nextSibling;   
        for(var n=0; n<pc.childNodes.length; n++){   
            pc.childNodes[n].className="hdn";   
        }   
        pc.childNodes[idx].className="";   
    }   
    </script>  
    <style type="text/css">  
    .debug{   
        border:1px solid red;   
    }   
    .hdn{   
        display:none;   
    }   
    ul.tabbar,ul.tabpage{   
        list-style-type:none;   
        margin:0;   
        font-size:12px;   
        padding:0;   
    }   
    ul.tabbar{   
        background:url(images/tabview.gif) repeat-x 0 -68px;   
        height:34px;   
    }   
    ul.tabbar li{   
        float:left;   
        width:83px;   
        height:34px;   
        line-height:34px;   
        text-align:center;   
        background:url(images/tabview.gif);   
        cursor:pointer;   
        cursor:hand;
       
    }   
    ul.tabbar li.cur{   
        background: url(images/tabview.gif) 0 -34px;   
    }   
    ul.tabpage{   
        border-style:ridge;   
        border-color:#dceefd;    
        border-width:0 2px 2px 2px;   
        height:302px;   
        overflow:hidden;   
    }   
    ul.tabpage li{   
        height:300px;   
        border-width:0;   
        overflow-y:auto;   
    }   
    </style>  
    </head>  
    <body>  
    <div style=" width:1000px;">
    <ul class="tabbar">  
        <li style="margin-left:1em" class="cur" onclick="tabclick(this)">过滤条件</li>  
        <li onclick="tabclick(this)">排序条件</li>  
        <li onclick="tabclick(this)">分　　组</li>  
        <li onclick="tabclick(this)">计算字段</li>
        <li onclick="tabclick(this)">计算字段</li> 
        <li onclick="tabclick(this)">计算字段</li> 
        <li onclick="tabclick(this)">计算字段</li>   
    </ul>  
    <ul class="tabpage">  
        <li>显示过滤条件</li>  
        <li class="hdn">显示排序条件</li>  
        <li class="hdn">显示分　　组</li>  
        <li class="hdn">显示计算字段</li>
        <li class="hdn">显示计算字段</li> 
        <li class="hdn">显示计算字段</li> 
        <li class="hdn">显示计算字段</li>   
    </ul> 
    </div> 
    </body>  
    </html>