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

就是217

于 2020-09-23 09:56:08 发布

阅读量2.7k

点赞数 3

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/qq_42777804/article/details/108746762

版权

这篇博客介绍了如何使用JavaScript实现按钮切换功能。尽管看似简单，但对于初学者来说可能具有一定挑战。文中通过代码示例来阐述实现过程，但由于作者在某部分没有充分理解，导致这部分的解释可能不够清晰。然而，随着学习的深入，理解会逐渐变得容易。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这里其实进行了点击操作，但是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++) {

最低0.47元/天解锁文章