html怎么做一个简单的点击事件

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html怎么做一个简单的点击事件相关的知识，希望对你有一定的参考价值。

参考技术A


如上图所示，在Dreamweaver中新建html、css、js文档各一个(注释:三个文档需放在同一文件夹中)在html中把css、js文档引用需注意css与js文档的引用位置，然后就在html文档中写基础代码先在body标签中创造一个div，也是最大的div，我给它的类名为“group”

然后在“group”中再给它一个div赋予一个ID还有一个按钮标签“button” 也在该标签中赋予一个ID，在div中再给它一个div，在新建的div中给它两个标签一个“h3”标签和一个“i”标签
也在该标签中赋予一个ID

这就是html样式写完后的效果，用浏览器打开在页面左上角
然后html的样式就写完了接下来写css的样式

先把默认的内外边距设置为0，“maigin”(外边距)“padding”(内边距)“*”代表的是所以的html样式“.”类选择器，选中类名为“header”然后设置给它一个遮罩层半透明；宽为屏幕的100%，高为1000个像素，给它一个固定定位，把调节定位的top、left设置为0像素并把这个样式隐藏；

然后选中类名“panel_head”给它宽700像素，内边距15像素，背景颜色为白色，给一个相对定位用top、left调节位置再给它5个像素的圆角
选中panel_head里面的“i”标签
导入一张图片，设置宽与高，刚好完全容纳那一张图片
设置绝对定位，调节其位置，再给它设置一个鼠标移入图形变化
这个时候用浏览器打开应该只是“再见”被隐藏起来了

最后改写js的样式了

写一个页面加载事件然后获取到在html中赋予的三个ID最后分别写出他们的点击事件写完后想要可以点击需要到文件夹中直接用浏览器打开加载进去只有左上角有一个按钮

点击一下会出来一个页面，背景为半透明，中间偏上的位置有白色的圆角矩形，圆角矩形中右边的“x”是我导入的图片不是样式，想要关闭背景为半透明的页面点击哪一张图片也就是哪一个“x”就行，然后就会返回刚加载的样子

通过案例 详解点击事件获取li的index，并切换对应的图片，排他思想，闭包，bind，let，jquery简单应用，简单的tab栏制作-初学者html+css+js练习demo

今天来一个关于点击li获取对应的index的demo，内有详解和避坑指南，请安心食用，今日也是干货满满的一天

灵感来源是H5考试的一道题目，大概是这样的要求：

今天就来做一个类似的demo，“手把手”教会你怎么获取点击的li的值，妈妈再也不用担心我获取不到值啦~

图片有点不清晰 大家将就看

这是导航条

1.思路

道理其实很简单，就是每个ul里有很多li，每个li又对应了一张图片或者一个div，所有每个li和图片的数量和顺序是相同的，我们可以通过js获取到当前点击的li是第几个的话，就可以通过这个index来获取到li所对应的图片或者div
那么改变li和图片样式的，就是死记硬背的改变css样式的代码的事了（获取后改变class或者style）
我们设置一个class叫current，记住它是独一无二的，哪个li被点击了，就把这个独一无二的class给谁。
既然是独一无二的class，在给li之前肯定要先给它来一个庄重的授权仪式，咳咳，不是
是先把所有的li的class样式先清空，避免有其他的li也私藏了current这个class的情况，所有搜身清空完毕后，再把独一无二的class=“current”给到点击的li，这样就完成了li的点击样式改变。
img的样式直接用display：block显示/none隐藏 来控制就好，将获取到的index拿去匹配所有的imgs，就可以适合li的小妾啦，适合li的图片了

li和img的样式都用到的是排他的思想，用多了自然就熟悉了，感觉很难，理解了原理和逻辑就可以手到擒来啦

2.代码

今天使用的工具依然是Vscode，和preview on live server的插件 可以移步到这儿看详细介绍

1.html

<div class="container">
        <ul>
            <li class="current">熊猫1号</li>
            <li>熊猫2号</li>
            <li>熊猫3号</li>
            <li>小狗1号</li>
        </ul>
        <div class="imgs">
            <img src="./images/panda1.jpg" alt="1" style="display: block;">
            <img src="./images/panda2.jpg" alt="2">
            <img src="./images/panda3.jpg" alt="3">
            <img src="./images/dog3.jpg" alt="4">
        </div>
    </div>

2.css

样式的话，我们给container设置合适的宽度，再利用父相子绝的技巧（父元素相对定位，子元素绝对定位），图片也使用绝对定位，就不会拍列起来了，而是重叠的放置在同一个位置。
再用到一个盒子垂直居中的方法，将盒子定位在body的中央，由于默认的body标签的宽是浏览器一样宽，但是高度是由内容撑开的，我们就暂且给body手动设置一个高度。
不要忘记设置一个独一无二的名为current的class（命名为啥都OK，只要人知道它是独一无二的就好），这个里设置好当li被点击到要变成的样式，我这儿改变了背景颜色和字体颜色

        * 
            margin: 0;
            padding: 0;
            list-style: none;
        
        
        body 
            height: 800px;
            /*垂直水平居中方法2.*/
            display: flex;
            justify-content: center;
            align-items: center;
        
        
        .container 
            width: 300px;
            height: 200px;
            /*父相子绝，使子元素不超出父元素，而导致溢出*/
            position: relative;
            /*整个盒子垂直居中显示*/
            /*方法1.*/
            /* left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px; */
        
        
        .container ul 
            width: 30%;
            height: 100%;
            position: absolute;
        
        
        li 
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: rgba(49, 146, 92, 0.795);
            /*透明度，整个元素都透明*/
            opacity: 0.8;
        
        
        .current 
            background-color: rgb(31, 109, 64);
            color: white;
            cursor: pointer;
        
        
        img 
            /*先将所有的图片隐藏起来，在行内元素设置单独的图片为block 显示一张图片*/
            display: none;
            width: 100%;
            height: 100%;
        
        
        .container .imgs 
            position: absolute;
            height: 100%;
            width: 70%;
            left: 30%;

3.js

基础设置，获取元素

 var lis = document.querySelectorAll("li"); //获取到所有的小li
        var imgs = document.querySelectorAll("img"); //获取到所有的图片
        //lis和imgs获取到的是伪数组，可以使用数组的一些方法，但不是真正的数组

1.难点

逻辑很简单，就是获取点击到的li对应的index，但是由于在js中，事件是异步事件，并且计算机执行的速度非常快，所有会导致不能直接在click事件或其他事件中获取到li的index，做个演示

var lis = document.querySelectorAll("li"); //获取到所有的小li
        var imgs = document.querySelectorAll("img"); //获取到所有的图片
        //lis和imgs获取到的是伪数组，可以使用数组的一些方法，但不是真正的数组

        //1.循环遍历，并且判断是哪个li被点击了
        //2.先将所有的li和img的样式清空，再进行点击所对应的元素的样式设置（排他思想）
        for (var i = 0; i < lis.length; i++) 
            lis[i].onclick = function(i) 
                //这样是没有办法获得点击li的对应的index，因为事件是异步的，获取到的i已经是循环完毕后的i了，也就是此时的i已经变成了4
                //不能获取到对应的i，就不能改变相应的样式
                console.log(i); //4,4,4,4

不管我点击哪个li，输出的i都为4

方法1.给每一个li设置index

for (var i = 0; i < lis.length; i++) 
            lis[i].index = i;

            //或者使用setAttribute()也可以
            //lis[i].setAttribute("index",i)
            //用lis[i].getAttribute(index)获取值

            lis[i].onclick = function(i) 
                console.log(this.index);
                for (var i = 0; i < lis.length; i++) 
                    lis[i].className = ""; //清空li样式
                    imgs[i].style.display = "none"; //清空img
                
                //给点击的li和对应的img设置样式
                this.className = "current";
                imgs[this.index].style.display = "block"

方法2.使用jquery

前提是引入jquery

  $("ul li").click(function() 
            //获取到点击的li的index
            var index = $(this).index();

            //先给点击到的li的class样式设置为current
            //再将点击到的li的其他兄弟节点的current的class演示移除（排他思想）
            //siblings（）获取所有的兄弟节点
            $(this).addClass("current");
            $(this).siblings().removeClass("current");

            //先给点击到的li对应的图片设置为显示
            //再将点击到的li的其他兄弟节点的图片设置为隐藏
            //siblings（）获取所有的兄弟节点  eq（）匹配为index的元素
            $(".imgs img").eq(index).css("display", "block")
            $(".imgs img").eq(index).siblings().css("display", "none")
        )

方法3.使用ES6的 let块级作用域

 for (let i = 0; i < lis.length; i++) 
            lis[i].onclick = function() 
                console.log(i);
                for (let i = 0; i < lis.length; i++) 
                    lis[i].className = ""; //清空li样式
                    imgs[i].style.display = "none"; //清空img
                
                //给点击的li和对应的img设置样式
                this.className = "current";
                imgs[i].style.display = "block"

2.稍微复杂一点的方法

方法4.使用闭包和立即执行函数()()

for (var i = 0; i < lis.length; i++) 
            lis[i].onclick = (
                function(index) 
                    return function() 
                        console.log(i);
                        for (var i = 0; i < lis.length; i++) 
                            lis[i].className = ""; //清空li样式
                            imgs[i].style.display = "none"; //清空img
                        
                        //给点击的li和对应的img设置样式
                        this.className = "current";
                        imgs[index].style.display = "block"
                    

                
            )(i)

方法5.使用bind()改变this指向每一条li，并传参i

for (let i = 0; i < lis.length; i++) 
            lis[i].onclick = function(index) 
                console.log(i);
                for (let i = 0; i < lis.length; i++) 
                    lis[i].className = ""; //清空li样式
                    imgs[i].style.display = "none"; //清空img
                
                //给点击的li和对应的img设置样式
                this.className = "current";
                imgs[index].style.display = "block"
            .bind(lis[i], i)

方法6.forEach

数组的forEach方法也可以获取index的值，但是这里获取到的lis和imgs是伪数组，所有不适用

3.完整代码

这边用的是let来获取index，有需要的uu可以直接用哦，Jquery文件和图片需要自己引入，并且注意路劲是否正确。完整文件可以评论区或者私信我

<!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>Document</title>
    <style>
        * 
            margin: 0;
            padding: 0;
            list-style: none;
        
        
        body 
            height: 800px;
            /*垂直水平居中
            方法2.*/
            display: flex;
            justify-content: center;
            align-items: center;
        
        
        .container 
            width: 300px;
            height: 200px;
            /*父相子绝，使子元素不超出父元素，而导致溢出*/
            position: relative;
            /*整个盒子垂直居中显示*/
            /*方法1.*/
            /* left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px; */
        
        
        .container ul 
            width: 30%;
            height: 100%;
            position: absolute;
        
        
        li 
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: rgba(49, 146, 92, 0.795);
            /*透明度，整个元素都透明*/
            opacity: 0.8;
        
        
        .current 
            background-color: rgb(31, 109, 64);
            color: white;
            cursor: pointer;
        
        
        img 
            /*先将所有的图片隐藏起来，在行内元素设置单独的图片为block 显示一张图片*/
            display: none;
            width: 100%;
            height: 100%;
        
        
        .container .imgs 
            position: absolute;
            height: 100%;
            width: 70%;
            left: 30%;
        
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li class="current">熊猫1号</li>
            <li>熊猫2号</li>
            <li>熊猫3号</li>
            <li>小狗1号</li>
        </ul>
        <div class="imgs">
            <img src="./images/panda1.jpg" alt="1" style="display: block;">
            <img src="./images/panda2.jpg" alt="2">
            <img src="./images/panda3.jpg" alt="3">
            <img src="./images/dog3.jpg" alt="4">
        </div>
    </div>
</body>
<script>
    window.onload = function() 
        //1.使用循环
        var lis = document.querySelectorAll("li"); //获取到所有的小li
        var imgs = document.querySelectorAll("img"); //获取到所有的图片
        //lis和imgs获取到的是伪数组，可以使用数组的一些方法，但不是真正的数组

        //1.循环遍历，并且判断是哪个li被点击了
        //2.先将所有的li和img的样式清空，再进行点击所对应的元素的样式设置（排他思想）



        //方法2. 使用ES6的let，let是块级作用域，可以直接获取i
        for (let i = 0; i < lis.length; i++) 
            lis[i].onclick = function() 
                console.log(i);
                for (let i = 0; i < lis.length; i++) 
                    lis[i].className = ""; //清空li样式
                    imgs[i].style.display = "none"; //清空img
                
                //给点击的li和对应的img设置样式
                this.className = "current";
                imgs[i].style.display = "block"
            
        



    
</script>
<script src="./Jquery.js"></script>

</html>

都看到（滑到）这儿，纯分享，不如给个大指拇的点赞吧！！！小M.祝大家学习顺利，考试顺利，工作顺利！欢迎评论区和私信

转载：欢迎转载，但未经作者同意，必须保留此段声明；必须在文章中给出原文连接；否则必究法律责任。

勿杠，欢迎大佬纠错

以上是关于html怎么做一个简单的点击事件的主要内容，如果未能解决你的问题，请参考以下文章

php怎么给按钮添加事件

iOS 怎么给tableview空白处添加点击事件而不影响cell中的一些按钮的事件

listview嵌套 子控件点击事件被拦截怎么做

点击<a>标签之后触发后台事件怎么做？或者js控制按钮的点击，怎么做，就是点击<a>之后触发一个按钮的事件

UIBarButton上的点击事件怎么做

做一个超链接，点击超链接通过事件触发显示“你好”，用jquery实现事件机制