滑动菜单（实例）

来源：互联网发布：尼康镜头大三元知乎编辑：程序博客网时间：2024/05/17 08:11

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>实践题 - 选项卡</title>    <link href="style.css" rel="stylesheet" type="text/css"/>    <script type="text/javascript" src="style.js"/>    <style type="text/css">        /* CSS样式制作 */    </style>    <script type="text/javascript">        // JS实现选项卡切换    </script></head><body><!-- HTML页面布局 --><div id="tab-list">    <ul id="ul1">        <li class="active">房产</li>        <li>家居</li>        <li>二手房</li>    </ul>    <div>        <ul>            <li><a href="#">175万购昌平邻铁三居 总价20万买一居</a></li>            <li><a href="#">200万内购五环三居 140万安家东三环</a></li>            <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>            <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>        </ul>    </div>    <div  class="hidden">        <ul>            <li><a href="#">275万购昌平邻铁三居 总价20万买一居</a></li>            <li><a href="#">200万内购五环三居 140万安家东三环</a></li>            <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>            <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>        </ul>    </div>    <div  class="hidden">        <ul >            <li><a href="#">375万购昌平邻铁三居 总价20万买一居</a></li>            <li><a href="#">200万内购五环三居 140万安家东三环</a></li>            <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>            <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>        </ul>    </div></div></body></html>

*{margin: 0;padding: 0;font-size: 14px;}a{    text-decoration: none;}ul{    list-style-type: none;}#tab-list{    width: 275px;height:190px;margin: 20px auto;    }.hidden{    display: none;}.show{display: block;}#ul1{border-bottom: 2px solid #8B4513;height: 32px;}#ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;border: 1px solid #999;border-bottom: none;margin-left: 5px;}#ul1 li:hover{cursor: pointer;}#ul1 li.active{border-top:2px solid #8B4513;border-bottom:2px solid #FFFFFF;}#tab-list div{border: 1px solid #7396B8;border-top: none;}#tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}

/** * Created by adminsjm on 2015/11/18. */window.onload=function(){    var li=document.getElementById("ul1").getElementsByTagName("li");    var div=document.getElementById("tab-list").getElementsByTagName("div");    for(var i=0;i<li.length;i++){        li[i].index=i;        li[i].onmousemove= function () {            for(var j=0;j<li.length;j++){                li[j].className="";            }            this.className="active";            for(var j=0;j<li.length;j++){                div[j].className="hidden";            }            div[this.index].className="show";        }    }}

0 0