滑动门js代码有吗？要兼容ie6，7和火狐的啊！

滑动门js代码有吗？要兼容ie6，7和火狐的啊！要精简的！

解决方案 »

  1.   


    <html>
    <head>
        <title>CSS滑动门</title>
        <style type="text/css">        
            .tabber{border:1px solid #AACCEE;clear:both;}
            .tabber .tmenu ul{margin:0;padding:0; display:block;}
            .tabber .tmenu li{
                float:left;            
                height:25px;
                line-height:25px;                       
                border-bottom:1px solid #AACCEE;
                border-right:1px solid #AACCEE;
                border-color:#AACCEE;            
                border-width:1px;
                color:#004499;
                cursor:default;
                display:block;                                                
                text-align:center;}
            .tabber .tmenu li.on{            
                background:#FFF;
                border-bottom-color:#FFFFFF;
                cursor:default;
                font-weight:bold;}
            .tabber .tbox{
                height:267px;
                clear:both;}
            .tabber .tbox div p{padding:15px;}
            .block{display:block;}   
            .none{display:none;}    
        </style>
        <script type="text/javascript">
            function SetTab(tab,id,cnt){
                var menus=document.getElementById(tab).getElementsByTagName("li");            
            for(i=0;i<cnt;i++){        
                i==id?menus[i].className="on":menus[i].className="";
                i==id?document.getElementById(tab+"-content"+i).className="block":document.getElementById(tab+"-content"+i).className="none";
                }
        }
        </script>
    </head>
    <body>
        <div class="tabber" style="width: 529px;">
            <div class="tmenu">
                <ul id="tab1">
                    <li style="width: 85px;" class="on" onmouseover="SetTab('tab1',0,4);"><strong>新闻</strong></li>
                    <li style="width: 85px;" onmouseover="SetTab('tab1',1,4);"><strong>娱乐</strong></li>
                    <li style="width: 85px;" onmouseover="SetTab('tab1',2,4);"><strong>财经</strong></li>
                    <li style="width: 85px;" onmouseover="SetTab('tab1',3,4);"><strong>读书</strong></li>
                 <li style="width: 185px; border-bottom: solid 1px #AACCEE; border-right: none;"></li>   
                </ul>
            </div>
            <div class="tbox">
                <div id="tab1-content0" class="block">
                    <p>看新闻，上网易</p>
                </div>
                <div id="tab1-content1" class="none">
                    <p>娱乐七天乐</p>
                </div>
                <div id="tab1-content2" class="none">
                    <p>今天股市暴跌</p>
                </div>
                <div id="tab1-content3" class="none">
                    <p>读书使人进步……</p>
                </div>
            </div>
        </div>
        <p><p>
       
    </body>
    </html>