纯CSS实现Tab切换以及 CSS+JS实现Tab切换

最新推荐文章于 2025-05-20 13:16:26 发布

geekzsp

最新推荐文章于 2025-05-20 13:16:26 发布

阅读量2.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css js tab切换

本文链接：https://blog.youkuaiyun.com/mixi9760/article/details/52065739

前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍两种方式实现Tab切换效果：一种仅使用CSS实现，适用于简单的鼠标悬停展示；另一种结合CSS和JavaScript，支持更复杂的交互，如多个Tab页之间的切换。文章包含完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯CSS实现Tab切换
CSSJS实现Tab切换
- 效果图
- 思路

纯CSS实现Tab切换

效果图

这里写图片描述

思路

ul li显示tab列表 li里面嵌套子div 显示详情
子div采用绝对布局（让所有的子div都重叠在一个地方）
然后全部隐藏在li的hover 时使其显示

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            list-style: none;
        }
        #main{
            width: 60px;

        }
        div{
            display: none;
            position: absolute;
            left: 13%;
            top: 3%;
        }
        .test{
            background-color: #c8f7ff;
        }
        .test:hover{
            background-color: cornflowerblue;
        }
        .test:hover div{
            display: block;
            background-color: bisque;
        }

    </style>
</head>
<body>

<ul id="main">
    <li class="test">手机
        <div>
            <ul>
                <li>小米</li>
                <li>华为</li>
                <li>中兴</li>
            </ul>
        </div>
    </li>

    <li  class="test">家电
        <div>
            <ul>
                <li>空调</li>
                <li>冰箱</li>
                <li>洗衣机</li>
            </ul>
        </div>
    </li>

    <li  class="test">家具
        <div>
            <ul>
                <li>沙发</li>
                <li>茶几</li>
                <li>衣橱</li>
            </ul>
        </div>
    </li>
</ul>
</body>
</html>

CSS+JS实现Tab切换

效果图：

这里写图片描述

思路：

和纯CSS 差不多先布局出来然后子div全部隐藏不同的是这里通过代码控制样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 600px;
            background-color: cadetblue;
        }
        .title {
            width: 100%;
            height: 50px;
        }

        .title_i {
            line-height: 50px;
            text-align: center;
            width: 100px;
            height: 50px;
            float: left;
            margin-right: 10px;
        }

        .content {
            width: 500px;
            height: 200px;
            background-color: #c8f7ff;
            position: relative;
        }

        .content_i {
            position: absolute;
            opacity: 0;
        }

        .title_i_active {
            background-color: #ffffff;
        }

        .content_i_active {
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="title" id="temptitle">
        <div class="title_i" id="title_{{index}}" onclick="select({{index}})">{{title}}</div>
        <!--title end-->
    </div>
    <!--title end-->
    <div class="content" id="tempcontent">
        <ul class="content_i" id="content_{{index}}">
            {{str}}
        </ul>
    </div>
    <!--content end-->
</div>
 <!--box end-->
</body>
<script>
    //    1 准备数据
    var data = [
        {
            title: "房产",
            content: ["275万购昌平邻铁三居 总价20万买一居", "200万内购五环三居 140万安家东三环", "北京首现零首付楼盘 53万购东5环50平", "京楼盘直降5000 中信府 公园楼王现房"]
        },
        {
            title: "家居",
            content: ["40平出租屋大改造 美少女的混搭小窝", "经典清新简欧爱家 90平老房焕发新生", "新中式的酷色温情 66平撞色活泼家居", "    瓷砖就像选好老婆 卫生间烟道的设计"]
        },
        {
            title: "二手房",
            content: ["通州豪华3居260万 二环稀缺2居250w甩", "西3环通透2居290万 130万2居限量抢购", "黄城根小学学区仅260万 121平70万抛!", "独家别墅280万 苏州桥2居优惠价248万"]
        }
    ]
    //     2 写入数据
    function writeData() {
        //2.1 拿到模版
        var mobantitle = g("temptitle").innerHTML;
        var mobancontent = g("tempcontent").innerHTML;

        var titleArr = [];
        var contentArr = [];
        //2.2 写入
        for (i in data) {
            titleArr[i] = mobantitle.replace(/{{index}}/g, i)
                    .replace(/{{title}}/g, data[i].title);
            var str="";
            for (var j = 0; j < data[i].content.length; j++) {
                str+="<li>"+data[i].content[j]+"</li>"
            }
            contentArr[i] = mobancontent.replace(/{{index}}/g, i)
                    .replace(/{{str}}/g,str);

        }
        g("temptitle").innerHTML = titleArr.join("");
        g("tempcontent").innerHTML = contentArr.join("");
    }


//    3 选择 方法
    function  select(n){
        var titles=g(".title_i");
        var content=g(".content_i");
        for(var i=0;i<titles.length;i++){
            titles[i].className="title_i";
            content[i].className="content_i";
        }
        var title_new=g("title_"+n);
        var content_new=g("content_"+n);
        title_new.className+=" title_i_active";
        content_new.className+=" content_i_active"
    }
    window.onload = function () {
        writeData();
    }
    function g(key) {
        if (key.charAt(0) == ".") {
            key = key.substr(1);
            return document.getElementsByClassName(key);
        }
        else {
            return document.getElementById(key);
        }
    }
</script>
</html>