点击相对应的块

最新推荐文章于 2021-03-19 02:49:24 发布

吴机智

最新推荐文章于 2021-03-19 02:49:24 发布

阅读量57

点赞数

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

本文链接：https://blog.csdn.net/m0_49893750/article/details/108502771

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul,li{
        padding: 0;
        margin: 0;
        list-style: none;
    }
    ul{
        width: 300px;
        height: 300px;
    }
    li{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        box-sizing: border-box;
        /* box-sizing: 设置当前width、height包含的内容有哪些
            border-box: border + width
            content-box: width
         */
        float: left;
        text-align: center;
        line-height: 100px;
    }
    div{
        width: 100px;
        height: 100px;
        background: red;
        margin-left: 10px;
        float: left;
        display: none;
    }
</style>
<body>
    <ul>
        <li>001</li>
        <li>002</li>
        <li>003</li>
        <li>004</li>
        <li>005</li>
        <li>006</li>
        <li>007</li>
        <li>008</li>
        <li>009</li>
    </ul>

    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
    <div>08</div>
    <div>09</div>

    <script>
        // for循环在页面加载的一瞬间执行完成, 当前i已经变成了循环结束的的条件
        // 点击每一个li, 让当前的li背景色变红
        var lis = document.getElementsByTagName('li');
        var divs = document.getElementsByTagName('div');
        // 每一个添加事件
        for(var i = 0; i < lis.length; i++){
            console.log(i);
            // 把自己的下标作为标签的一个属性值存储在自定义属性上 ---> 自定义索引
            // 标签.属性名 = 下标;
            
            lis[i].index = i;
            lis[i].onclick = function(){
                // console.log(lis, i);
                // for循环嵌套的事件中得不到正确的下标i
                // 改变li的背景色
                console.log(this.index);
                // lis[i].style.background = 'red';
                this.style.background = 'red';

                divs[this.index].style.display = 'block';
            }
        }
    </script>
</body>
</html>

吴机智

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击相对应的块

<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> ul,li{ padding: 0; ...
复制链接

扫一扫