兼容所有浏览器js滑动门，tab选项卡特效代码

2016-09-23 网页编程网 网页编程网

<html>
<head>
<title>网页特效 兼容所有浏览器js滑动门特效</title>
<style type="text/css">
body,ul,dl,dt,dd {margin:0px; padding:0px;}
body{ font-size:12px;}
li {list-style-type:none;}
#tab {
        width:280px;
        margin:50px auto;
    }
    #tab dl {
        padding-top:5px;
        padding-left:5px;
        background-color:#F90;
        overflow:hidden;
zoom:1
    }
    #tab dl dt {
        float:left;
        margin-right:110px;
    }
    #tab dl dt strong {font-size:21px;}
    #tab dl dd {
        float:left;
        cursor:pointer;
        margin-top:5px;
        padding:5px 7px 3px 7px;
    }
    #tab dl dd.off {
        color:red;
        background-color:#FFF;
    }
    #tab ul {
        height:100px;
        display:none;
        border:#F90 1px solid;
        border-top:none;
    }
    #tab ul.off {
        display:block;
    }
</style>
<body>
<div id="tab">
    <dl>
        <dt><strong>排行</strong></dt>
        <dd>最近</dd>
        <dd>本月</dd>
        <dd>总榜</dd>
    </dl>
    <ul>
        <li>网一号内容，打造国内一流网页特效站！站长 特效 网站长js特效</li>
    </ul>
    <ul>
        <li>二号内容 ， 打造国内一流网页特效站！ 站长js特效</li>
    </ul>
    <ul>
        <li>网三号内容 打造国内一流网页特效站！</li>
    </ul>
</div>
<script type="text/javascript">
function tagNet(Tag){
    var tab = document.getElementById(Tag);
    var ul = tab.getElementsByTagName("ul");
    var dd = tab.getElementsByTagName("dl")[0].getElementsByTagName("dd");
    for(var i=0;i<ul.length;i++){
        ul[i].className = i?"":"off";
    }
    for(var i=0;i<ul.length;i++){
        dd[i].value = i;
        dd[i].className = i?"":"off";
        dd[i].onmouseover = function(){
            for(var n=0;n<ul.length;n++){
                dd[n].className = dd[n]!=this?"":"off";
            }
            for(var n=0;n<ul.length;n++){
                ul[n].className = n!=this.value?"":"off";
            }
        }
    }
}
new tagNet("tab");
</script>
</body>
</html>

阅读原文

阅读 3997

123 显示电脑版