选项卡切换

最新推荐文章于 2022-08-14 15:21:43 发布

紫晓宁

最新推荐文章于 2022-08-14 15:21:43 发布

阅读量267

点赞数

分类专栏：前端web 文章标签： tab 选项卡

本文链接：https://blog.csdn.net/zixiaoning/article/details/51320809

版权

前端web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

    <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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
选项卡切换

title> 选项卡title> style type="text/css"> * { /* (*)通配符(缺点)使用使页面加载变慢，影响性能（优点）简化样式的代码 */ margin: 0; padding: 0; font: normal 12px "微软雅黑"; colo
复制链接

扫一扫

专栏目录

选项卡 切换

选项卡切换