选项卡切换

来源：互联网发布：九寨沟地震网络谣言编辑：程序博客网时间：2024/05/10 07:52
    <title> 选项卡</title>    <style type="text/css">        * { /* (*)通配符(缺点)使用使页面加载变慢，影响性能（优点）简化样式的代码 */            margin: 0;            padding: 0;            font: normal 12px "微软雅黑";            color: #000000;            list-style-type: none;            text-decoration: none;        }        #tab-list { /* 选项卡的大小设置 */            width: 275px;            height: 190px;            margin: 20px auto;        }        #ul1 { /* 导航菜单，只设置底部 */            border-bottom: 2px solid #8B4513;            height: 32px;        }        #ul1 li { /* 导航菜单，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 { /* 内容div */            border: 1px solid #7396B8;            border-top: none;        }        #tab-list div li {            height: 30px;            line-height: 30px;            text-indent: 8px; /*段落缩进*/        }        /* show和hide的设置，js用来改变显示的效果 */        .show {            display: block;        }        .hide {            display: none;        }    </style>    <script type="text/javascript">        window.onload = function () {            var oUl1 = document.getElementById("ul1");//菜单按钮            var aLi = oUl1.getElementsByTagName("li");//所有的li标签            var oDiv = document.getElementById("tab-list");//切换式div            var aDiv = oDiv.getElementsByTagName("div");//要切换的div            for (var i = 0; i < aLi.length; i++) {                aLi[i].index = i;                aLi[i].onmouseover = function () {//li标签点击                    for (var i = 0; i < aLi.length; i++) {                        aLi[i].className = "";//li的类名为空                    }                    this.className = "active";//当前活动li标签的类名为爱窗体虐                    for (var j = 0; j < aDiv.length; j++) {                        aDiv[j].className = "hide";                    }                    aDiv[this.index].className = "show";                }            }        }    </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="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>            <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>            <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>            <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>        </ul>    </div>    <div class="hide">        <ul>            <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>            <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>            <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>            <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>        </ul>    </div>    <div class="hide">        <ul>            <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>            <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>            <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>            <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>        </ul>    </div></div></body>
0 0
选项卡 切换

选项卡切换
