js实现点击效果代码

用户交互: 在网页中，点击效果可以增强用户的交互体验，使用户明确知道某个操作已被执行。
表单提交: 在表单提交按钮上应用点击效果，可以提示用户表单正在处理中。
导航菜单: 在导航菜单的按钮上应用点击效果，可以帮助用户识别当前选中的菜单项。

要实现点击效果，可以使用JavaScript来监听按钮的点击事件，并在事件触发时执行相应的操作。以下是一个简单的示例代码，展示了如何实现点击效果：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击效果示例</title>
    <style>
        .button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        .clicked {
            background-color: #4CAF50;
            color: white;
        }
    </style>
</head>
<body>
    <button id="myButton" class="button">点击我</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    const button = document.getElementById('myButton');

    button.addEventListener('click', function() {
        button.classList.toggle('clicked');
    });
});

解释

HTML部分:
- 创建一个按钮元素，并为其指定一个ID myButton。
- 使用内联样式定义按钮的基本样式，并定义一个类 .clicked 用于改变按钮被点击后的样式。

JavaScript部分:
- 使用 DOMContentLoaded 事件确保DOM完全加载后再执行脚本。
- 获取按钮元素并为其添加点击事件监听器。
- 在点击事件的处理函数中，使用 classList.toggle 方法切换按钮的 clicked 类。如果按钮已经有 clicked 类，则移除它；如果没有，则添加它。