立即执行函数，小闭包实现排他功能

最新推荐文章于 2024-07-25 09:24:40 发布

JoZq

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量91

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_45838680/article/details/107058398

版权

js代码

<script>
    window.onload = function () {
        var allLis = document.getElementsByTagName('li');
        // 记录移动前选中li对应的索引
        var preSelectLiIndex = 1;
        for(var i=0; i<allLis.length; i++){
            (function (i) {
                var li = allLis[i];
                li.onmouseover = function () {
                    // 清除一开始 默认选中的li的样式
                    allLis[preSelectLiIndex].className = '';
                    // 设置
                    this.className = 'current';
                    // 赋值
                    preSelectLiIndex = i;
                }
            })(i);
        }
    }
</script>

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li{
            border: 1px solid #000;
            background-color: #ccc;
            cursor: pointer;
        }
        
        .current{
            background-color: orangered;
        }
    </style>
</head>
<body>
<ul>
    <li ></li>
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

JoZq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
立即执行函数，小闭包实现排他功能

js代码<script> window.onload = function () { var allLis = document.getElementsByTagName('li'); // 记录移动前选中li对应的索引 var preSelectLiIndex = 1; for(var i=0; i<allLis.length; i++){ (function (i) {
复制链接

扫一扫