js选项卡

最新推荐文章于 2024-01-24 12:19:34 发布

cheng0867

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量493

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/cheng0867/article/details/51756976

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        /* CSS样式制作 */
        *{margin:0;padding:0;}
        ul{list-style:none;}
        a{text-decoration:none;color:#000;}
        .show{display:block;}
        .hide{display:none;}
        #tabs{width:300px;height:200px;}
        #tags{height:32px;line-height:30px;border-bottom:2px solid #000;}
        #tags li{display:inline-block;width:60px;text-align:center;border:1px solid #000;border-bottom:none;}
        #tags li:hover{cursor:pointer;}
        #tags li.active{border-top:2px solid #000;border-bottom:2px solid #fff;}
        #content ul{border:1px solid #000;border-top:none;}
        #content ul li{height:30px;line-height:30px;text-indent:10px;}
    </style>
    <script type="text/javascript">
        // JS实现选项卡切换
        window.onload=function(){
            var tags=document.getElementById("tags");
            var lis=tags.getElementsByTagName("li");
            var content=document.getElementById("content");
            var uls=content.getElementsByTagName("ul");
            for(var i=0;i<lis.length;i++){
                lis[i].index=i;
                lis[i].onmouseover=function(){
                    for(var i=0;i<lis.length;i++){
                        lis[i].className="";
                        uls[i].className="hide";
                    }
                    this.className="active";
                    uls[this.index].className="show";
                }
            }
        }
    </script>
</head>
<body>
<!-- HTML页面布局 -->
<div id="tabs">
    <ul id="tags">
        <li class="active">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div id="content">
        <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>
        <ul class="hide">
            <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>
        <ul class="hide">
            <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>
</html>