2021-06-24 css选项卡的实现

前端OnTheRun

已于 2022-10-06 18:36:13 修改

阅读量307

点赞数

分类专栏： js 文章标签： css dom display属性 js 闭包

于 2021-06-24 09:25:45 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/117997743

版权

js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了如何使用CSS和JavaScript实现选项卡效果，当鼠标移动到选项上时，对应内容栏显示。通过闭包解决异步问题，并展示了使用jQuery进行的改进。详细代码包括HTML、CSS和JS部分。

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

1.内容栏的子标签默认设置隐藏(默认只显示第一个)
2.在for循环中设置鼠标移动事件,目的是移动到哪一个选项li就得到对应的索引值:用闭包解决异步问题
3.移动进入选项li,在子循环中,当前索引的内容取消隐藏,其余索引的内容保持隐藏

代码

html

<div class="box">
    <ul>
        <li>首页</li>
        <li>友情链接</li>
        <li>加入我们</li>
        <li>联系我们</li>
    </ul>
    <div class="cont">
        <p>我是首页内容</p>
        <p>我是友情链接</p>
        <p>我是加入我们</p>
        <p>我是联系我们</p>
    </div>
</div>

css

* {margin: 0;padding: 0;}
.box {width: 405px;height: 330px;margin: 0 auto;}
li {list-style-type: none;width: 99px;height: 30px;background: turquoise;text-align: center;line-height: 30px;float: left;border-right: solid #cef5f0;color: #ffffff;}
li:nth-child(4) {border-right: none;}
li:hover {background: rgb(255, 208, 0);}
.cont {clear: left;width: 100%;height: 300px;}
p {width: 100%;height: 100%;background: #fff3e5;display: none;font-size: 40px;line-height: 300px;text-align: center;color: lightcoral;font-weight: bolder;}
p:nth-child(1) {display: block;}

js

//获取节点
var lis = document.querySelectorAll("li");;
var p = document.querySelectorAll("p");
//设置一个闭包,达到移动到哪个li就得到对应的索引值的效果
//在第二个循环中把得到的当前索引index与循环变量j比较
for (let i = 0; i < lis.length; i++) {
    (function() {
        var index = i;
        lis[index].addEventListener("mouseover", function() {
            for (let j = 0; j < lis.length; j++) {
                if (j != index) p[j].style.display = "none";
                else p[j].style.display = "block";
            }
        });
    })();
}

效果

在这里插入图片描述

进行jQuery改进

代码 (只看js部分)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 405px;
            height: 330px;
            margin: 0 auto;
        }
        
        li {
            list-style-type: none;
            width: 99px;
            height: 30px;
            background: turquoise;
            text-align: center;
            line-height: 30px;
            float: left;
            border-right: solid #cef5f0;
            color: #ffffff;
        }
        
        li:nth-child(4) {
            border-right: none;
        }
        /* li:hover {
            background: rgb(255, 208, 0);
        } */
        
        .cont {
            clear: left;
            width: 100%;
            height: 300px;
        }
        
        p {
            width: 100%;
            height: 100%;
            background: #fff3e5;
            display: none;
            font-size: 40px;
            line-height: 300px;
            text-align: center;
            color: lightcoral;
            font-weight: bolder;
        }
        
        p:nth-child(1) {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>首页</li>
            <li>友情链接</li>
            <li>加入我们</li>
            <li>联系我们</li>
        </ul>
        <div class="cont">
            <p>我是首页内容</p>
            <p>我是友情链接</p>
            <p>我是加入我们</p>
            <p>我是联系我们</p>
        </div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>
        $("ul>li").click(function() {
            // 第一步:实现当前选中的li的样式改变和其他未选中的li的样式还原
            $(this).css({
                background: "rgb(255, 208, 0)"
            }).siblings().css({
                background: "turquoise"
            });
            // 第二步:记录当前点击的li对应的索引值
            // console.log($(this).index());
            // 第三步:同步显示该索引值对应的第index个.cont>p
            $(".cont>p").eq($(this).index()).css({
                display: "block"
            }).siblings().css({
                display: "none"
            });
        });
    </script>
</body>

</html>