JS实现--按钮切换（简单）

约定不等于承诺〃 2022-12-10 01:15 281阅读 0赞

这种东西真的是看着简单，刚学习的时候比较困难

![20200923095320495.gif][]

这里其实进行了点击操作，但是gif给弄得有点快

上代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <button class="btn">这是第一个按钮</button>
        <button class="btn">这是第二个按钮</button>
        <button class="btn">这是第三个按钮</button>
    </body>
    <script>
        var btns = document.getElementsByClassName("btn");
        // 默认选择第一个
        btns[0].style.color = "red";
    
        // 记录红色按钮索引
        var x = 0;
    
        // 绑定点击事件
        for (var i = 0; i < 3; i++) {
            // 自定义属性添加索引
            btns[i].index = i;
            // 绑定事件
            btns[i].onclick = function () {
                // 把红色的变成黑色
                btns[x].style.color = "black";
                // 把当前点击的按钮变成红色
                this.style.color = "red";
                // 把当前按钮的索引赋值给x
                x = this.index;
            }
        }
    
    </script>
    
    </html>

主要是下面的 我没好好听，目前不是特别理解。。。。。。。

之后就好了

[20200923095320495.gif]: /images/20221123/6311f37509cd4b77925f80020b4a72a0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关 java swing实现点击按钮切换图片（简单实现）

> 本文教程，主要提供一个简单的例子，使用java swing完成点击按钮能够切换图片。目录一、程序预览二、程序代码 --------------------

柔光的暖阳◎/ 2024年02月22日 09:41/ 0 赞/ 15 阅读

相关 js实现简单的按钮选择

JavaScript实现简单的按钮选择功能分析：四个按钮，全选，全不选，全选和全不选结合，反选。 <!DOCTYPE html> <html lang

忘是亡心i/ 2023年01月08日 03:23/ 0 赞/ 133 阅读

相关 JS实现--按钮切换（简单）

这种东西真的是看着简单，刚学习的时候比较困难 ![20200923095320495.gif][] 这里其实进行了点击操作，但是gif给弄得有点快上代码 <!

约定不等于承诺〃/ 2022年12月10日 01:15/ 0 赞/ 282 阅读

相关 python实现按钮切换界面_wxpython实现按钮切换界面的方法

本文实例为大家分享了wxpython按钮切换界面的具体实现代码，供大家参考，具体内容如下 \-\- coding:utf-8 -\- import wx class Te

- 日理万妓/ 2022年11月05日 10:51/ 0 赞/ 291 阅读

相关 gsap+svg开关灯切换按钮js特效

[下载地址][Link 1] gsap+svg开关灯切换按钮特效，很有创意JavaScript开关特效。 ![1632803095.png][] dd: [Link

r囧r小猫/ 2022年09月13日 14:21/ 0 赞/ 218 阅读

相关按钮开关实现背景的切换

<—————>实现了一个按钮切换多张图片的功能， boolHelloWorld::init() \{ // // 1. super init first if ( !

柔情只为你懂/ 2022年08月13日 06:59/ 0 赞/ 185 阅读

相关 js按钮切换图片案例

js修改img标签src属性的值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"

悠悠/ 2022年04月06日 05:56/ 0 赞/ 271 阅读

相关 JS实现点击按钮切换sheet页

1.需求描述有的时候我们想实现上一页、下一页或跳转到指定sheet页。效果如下 ![http://help.finereport.com/uploads/201

左手的ㄟ右手/ 2022年02月02日 01:59/ 0 赞/ 386 阅读

相关原生js点击按钮切换图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态切换图片</

谁借莪１个温暖的怀抱￠/ 2022年01月05日 11:27/ 0 赞/ 385 阅读

相关 JS实现的简单tab切换功能完整示例

本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <he

怼烎@/ 2021年11月02日 17:12/ 0 赞/ 229 阅读