JavaScript -WebAPI - 案例 - Tab栏切换

最新推荐文章于 2021-09-06 15:02:53 发布

Henry_ww

最新推荐文章于 2021-09-06 15:02:53 发布

阅读量139

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/Henry_ID/article/details/119532299

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

在这里插入图片描述

<!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>Tab栏切换</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            .box {
                width: 400px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 100px auto;
            }

            .hd {
                height: 45px;
            }

            .hd span {
                display: inline-block;
                /*将行内元素转换成行内块元素，宽高才起作用*/
                width: 90px;
                background-color: pink;
                line-height: 45px;
                text-align: center;
                cursor: pointer;
            }

            .hd span.current {
                /*交集选择器，标签指定式选择器*/
                background-color: purple;
                /*紫色*/
            }

            .bd li {
                height: 255px;
                background-color: purple;
                display: none;
                /*设置隐藏*/
            }

            .bd li.current {
                display: block;
                /*显示*/
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">
            <div class="hd">
                <span class="current">体育</span>
                <span>娱乐</span>
                <span>新闻</span>
                <span>综合</span>
            </div>
            <div class="bd">
                <ul>
                    <li class="current">我是体育模块</li>
                    <li>我的娱乐模块</li>
                    <li id="li3">我是新闻模块</li>
                    <li>我是综合模块</li>
                </ul>
            </div>
        </div>
    </body>
    <script>
        // 需求:鼠标移入Tab栏,切换上面的效果和下面的模块

        // 1.获取span和li(全部)
        const spans = document.querySelectorAll(".hd span");
        const lis = document.querySelectorAll(".bd li");
        // console.log(spans, lis);

        // 2. 遍历span: 做事件: onmouseover
        spans.forEach(function (span, index) {
            span.onmouseover = function () {
                // 3. 事件处理: 排他span, 排他li(基于span的下标)
                spans.forEach(function (item) {
                    // 先统一
                    item.classList.remove("current");
                    lis.forEach(function (item) {
                        item.classList.remove("current");
                    });
                });
                // 后特殊
                span.classList.add("current");
                lis[index].classList.add("current");
            };
        });

        // 总结
        // 多对多关系: 彼此之间是一对一的关系, 共享下标
    </script>
</html>

Henry_ww

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript -WebAPI - 案例 - Tab栏切换

<!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" /&g.
复制链接

扫一扫