使用js实现tab选项卡效果

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

葡萄干是个程序员

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

阅读量9.2k

点赞数 5

分类专栏： Web前端文章标签： Javascript 选项卡效果

本文链接：https://blog.csdn.net/qq_15096707/article/details/50605671

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

这里提供了一种制作选项卡的思路。在制作过程中首先考虑的是html结构，元素如何摆放，此外通过这样的摆放，通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听，当进行选项卡切换时，我们可以对所有内容进行隐藏，之后再对选中的内容进行显示以达到切换的效果。

效果如下：

点击“家居“可进行切换：

程序如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        /* CSS样式制作 */
        .tab-div {
            width: 400px;
            position: relative; /*作为选项卡内容的定位*/
        }
        ul {
            list-style: none;
        }
        .tab {
            width: 400px;
            overflow: hidden;
            margin: 0;
            padding: 0;

            position: relative;
            z-index: 2;
        }
        .tab li{
            float: left;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #DDD;
            border-bottom: 0;
            margin-left: 10px;
            background: #fff;
            cursor: pointer;
        }
        .tab-content {
            width: 350px;
            /*position: absolute;*/
            border: 1px solid #DDD;
            border-top: 3px solid #e4393c;

            text-align: center;

            position: absolute;
            top: 31px;
            left: 0;
        }
        .tab-content ul {
            margin: 0;
            padding: 10px;
        }
        .tab-content li {
            padding: 10px;
        }
        .tab-content li a {
            color: #000;
            text-decoration: none;
        }
        .tab-content li a:hover {
            color: #e4393c;
            text-decoration: underline;
        }
        .tab .tab-active {
            border-top: 3px solid #e4393c;
            border-bottom: 3px solid #fff;
        }
        .tab-content-show {
            display: block;
        }
        .tab-content-hide {
            display: none;
        }
    </style>
    <script type="text/javascript">
        // JS实现选项卡切换
        window.onload = function() {
            var tabList = document.getElementById("tab-list");
            var aLis = tabList.getElementsByTagName("li");
            var tDiv = document.getElementById("tDiv");
            var contents = tDiv.getElementsByTagName("div");

            for(var i = 0; i < aLis.length; i++) {
                aLis[i].index = i;
                aLis[i].onclick = function() {
                    for(var j = 0; j < aLis.length; j++) {
                        aLis[j].className = '';
                    }
                    this.className = "tab-active";

                    for(var j = 0; j < contents.length; j++) {
                        contents[j].className = "tab-content tab-content-hide";
                    }
                    contents[this.index].className = "tab-content tab-content-show";
                };
            }
        };

    </script>

</head>
<body>
<!-- HTML页面布局 -->
<div id="tDiv" class="tab-div">
    <ul id="tab-list" class="tab">
        <li class="tab-active">房产</li>
        <li>家居</li>
        <li>二手房</li>
    </ul>
    <div class="tab-content tab-content-show">
        <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="tab-content tab-content-hide">
        <ul>
            <li><a href="#">40平出租屋大改造 美少女的混搭小窝</a></li>
            <li><a href="#">经典清新简欧爱家 90平老房焕发新生</a></li>
            <li><a href="#">新中式的酷色温情 66平撞色活泼家居</a></li>
            <li><a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
        </ul>
    </div>
    <div class="tab-content tab-content-hide">
        <ul>
            <li><a href="#">通州豪华3居260万 二环稀缺2居250w甩</a></li>
            <li><a href="#">西3环通透2居290万 130万2居限量抢购</a></li>
            <li><a href="#">黄城根小学学区仅260万 121平70万抛!</a></li>
            <li><a href="#">独家别墅280万 苏州桥2居优惠价248万</a></li>
        </ul>
    </div>
</div>
</body>
</html>

葡萄干是个程序员

关注

5
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
使用js实现tab选项卡效果

这里提供了一种制作选项卡的思路。在制作过程中首先考虑的是html结构，元素如何摆放，此外通过这样的摆放，通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听，当进行选项卡切换时，我们可以对所有内容进行隐藏，之后再对选中的内容进行显示以达到切换的效果。效果如下：点击“家居“可进行切换：程序如下：实践题 - 选
复制链接

扫一扫