选项卡效果

来源：互联网发布：软件站编辑：程序博客网时间：2024/06/03 21:18
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{margin:0;padding:0;}        #container{position:relative;}        li{list-style: none;float:left;line-height:50px;text-align:center;width:80px;border-right:1px solid #eee;}        #nav{width:260px;height:50px;border:1px solid #eee}        #nav li.active{background:#f00;}        #container div{display:none;position:absolute;left:0;top:50px;}        #container div.active{display:block;}    </style></head><body><div id="container">    <ul id = "nav">        <li class = "active">汽车</li>        <li>降价</li>        <li>二手车</li>    </ul>        <div class = "active"><img src="1.PNG" alt=""></div>        <div><img src="2.PNG" alt=""></div>        <div><img src="3.PNG" alt=""></div></div><script>    var lis = document.getElementsByTagName("li");    var divs = document.getElementById("container").getElementsByTagName("div");    console.log(lis);    console.log(divs);    for(var i = 0;i<lis.length;i++){        lis[i].index = i;        lis[i].onmouseenter = function(e){            for(var m = 0;m<lis.length;m++){                lis[m].className = "";            }            this.className = "active";            for(var n = 0;n<lis.length;n++){                divs[n].className = "";            }            divs[this.index].className = "active";        }    }</script></body></html>
0 0