请老师检查

来源：3-13 编程练习

tobeabee

2023-01-28 21:52:23

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .list li {
            font-size: 20px;
            color: black;
        }

        .list li.current {
            font-size: 25px;
            color: red;
        }
    </style>
</head>

<body>
    <ul class="list" id="list">
        <li data-n="HTML" class="current">HTML</li>
        <li data-n="CSS">CSS</li>
        <li data-n="JavaScript">JavaScript</li>
        <li data-n="jquery">jquery</li>
        <li data-n="HTML5">HTML5</li>
        <li data-n="CSS3">CSS3</li>
        <li data-n="ES6">ES6</li>
    </ul>
    <script type="text/javascript">
        //补充代码
        var list = document.getElementById('list');
        var lis = list.getElementsByTagName('li');

        list.addEventListener('mouseover', function (e) {
            if (e.target.tagName.toLowerCase() == 'li') {
                let curLi = e.target;
                for (let i = 0; i < lis.length; i++) {
                    let n = lis[i].getAttribute('data-n');
                    if (lis[i] == curLi) {
                        lis[i].className = 'current';
                        lis[i].innerText = n + '我是第' + (i + 1) + '个';
                    } else {
                        lis[i].className = '';
                        lis[i].innerText = n;
                    }
                }

                // console.log(e.target);
            }
        }, false);


    </script>
</body>

</html>

写回答

1回答