排他功能

最新推荐文章于 2022-02-28 13:40:18 发布

Dev _

最新推荐文章于 2022-02-28 13:40:18 发布

阅读量284

点赞数

分类专栏： JavaScript

wushen

本文链接：https://blog.csdn.net/qq_44317018/article/details/88829739

版权

JavaScript 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

var inputObjs = document.getElementsByTagName("input");//数组【input1,input2...】
    //遍历数组，获取每一个按钮，为按钮添加点击事件
    for (var i = 0; i < inputObjs.length; i++) {
        //每个按钮添加点击事件
        inputObjs[i].onclick = function () {
            // 两件事：
            //  ①所有的按钮的值改为  "哈哈"
            //遍历数组，获取每一个按钮，改变按钮的value值
            for (var j = 0; j < inputObjs.length; j++) {
                inputObjs[j].value = "哈哈";
            }
            //    ②当前的按钮(this)的值变成 "嘻嘻"
            // console.log(i);
           this.value = "嘻嘻"
        }
    }
    console.log(i);//6
    //for循环在页面加载的时候，就执行完毕了 事件处理函数里面的内容是 在点击触发时执行的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .nav li {
            float: left;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: pink;
            color: #fff;
            cursor: pointer;
        }

        .nav li.active {
            background-color: orange;
        }

        .content li {
            width: 400px;
            height: 300px;
            display: none;
            background-color: orange;
        }

        .content li.show {
            display: block;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li data-content-id="content01" class="active">菜单1</li>
    <li data-content-id="content02">菜单2</li>
    <li data-content-id="content03">菜单3</li>
    <li data-content-id="content04">菜单4</li>
</ul>
<ul class="content">
    <li id="content01" class="show">内容1</li>
    <li id="content02">内容2</li>
    <li id="content03">内容3</li>
    <li id="content04">内容4</li>
</ul>
<script>
    document.querySelector('.nav').onclick = function (e) {
        var nowLi = e.target;
        document.querySelector('.nav li.active').classList.remove('active');
        nowLi.classList.add('active');
        document.querySelector(".content li.show").classList.remove('show');
        document.querySelector("#" + nowLi.dataset.contentId).classList.add('show');

    }


</script>
</body>
</html>

Dev _

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
排他功能

点击按钮，====点击事件上一次点击的按钮的值由 "嘻嘻" 变成 "哈哈"======把所有的按钮的值改为 "哈哈"再把当前的按钮的值变成 “嘻嘻” ，var inputObjs = document.getElementsByTagName("input");//数组【input1,input2...】 //遍历数组，获取每一个按钮，为按钮添加点击事件 for (va...
复制链接

扫一扫