JavaScript - WebAPI - 排他思想 - 案例 - 筋斗云

最新推荐文章于 2023-03-16 09:14:59 发布

Henry_ww

最新推荐文章于 2023-03-16 09:14:59 发布

阅读量104

点赞数

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

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

版权

案例专栏收录该内容

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>事件案例 - 排他思想 - 筋斗云</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul {
                list-style: none;
            }

            body {
                background-color: #333;
            }

            .nav {
                width: 800px;
                height: 42px;
                margin: 100px auto;
                /*background-color: red;*/
                background: #fff url(images/rss.png) no-repeat right center;
                border-radius: 10px;
                position: relative;
            }

            .nav li {
                width: 83px;
                height: 42px;
                /*background-color: red;*/
                text-align: center;
                line-height: 42px;
                float: left;
                cursor: pointer;
            }

            ul {
                position: relative;
            }

            .nav .current {
                background: url(images/cloud.gif) no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="nav">
            <ul id="navBar">
                <li class="current">北京校区</li>
                <li>上海校区</li>
                <li>广州校区</li>
                <li>深圳校区</li>
                <li>武汉校区</li>
                <li>关于我们</li>
                <li>联系我们</li>
                <li>招贤纳士</li>
            </ul>
        </div>
    </body>
    <script>
        // 获取所有的li
        const lis = document.querySelectorAll(".nav li");
        console.log(lis);

        // 定义一个变量,记录current当前下标
        let index = 0;

        // 鼠标移入事件,所有的li
        lis.forEach(function (li, i) {
            li.onmouseover = function () {
                // 事件内部处理:排他思想
                lis.forEach(function (item) {
                    // 1.先统一
                    item.classList.remove("current");
                });
                // 2.再特殊
                this.classList.add("current");

                // 需求3.给所有的li做点击事件,记住被点击的li是哪一个
                li.onclick = function () {
                    index = i;
                };
            };

            // 需求2:给整个ul添加鼠标移出事件,背景回到原来位置(一开始记录的位置)
            document.querySelector("#navBar").onmouseout = function () {
                //   排他思想
                lis.forEach(function (item) {
                    //  先统一,去掉current类
                    item.classList.remove("current");
                    //   后特殊,    current回到下标初始地方
                    lis[index].classList.add("current");
                });
            };
        });

        // 总结
        // 不论移入还是移出: 都是排他(兄弟的唯一性)
        // 点击的时候: 要想办法让鼠标移出的时候, 能够回到被点击的位置
    </script>
</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - 排他思想 - 案例 - 筋斗云

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

扫一扫