如何用JavaScript实现两个按钮切换 |21xrx.com

如何用JavaScript实现两个按钮切换

2023-06-10 14:49:44 深夜i -- --

JavaScript 按钮切换

我在前端开发中经常需要实现一些交互效果，比如常见的按钮切换。最近，我学习了JavaScript的相关知识，尝试用JavaScript实现了两个按钮的切换，现在和大家分享一下。

首先，我们需要在HTML中定义两个按钮：

接下来，我们需要编写JavaScript代码来实现切换。我们可以使用addEventListener()方法来监听按钮的点击事件，在事件回调函数中切换按钮的样式。


const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
button1.addEventListener('click', function() {
 button1.classList.add('selected');
 button2.classList.remove('selected');
});
button2.addEventListener('click', function() {
 button2.classList.add('selected');
 button1.classList.remove('selected');
});

在上面的代码中，我们先使用document.getElementById()方法获取到两个按钮的DOM元素，然后使用addEventListener()方法分别监听它们的点击事件。在按钮被点击时，我们分别通过classList.add()和classList.remove()方法来添加或移除按钮的selected类，从而实现切换的效果。

最后，我们需要在CSS中定义selected类的样式：


.selected
 background-color: #f00;
 color: #fff;

到这里，我们就成功地用JavaScript实现了两个按钮的切换功能。通过这个例子，我学习到了JavaScript的事件处理和DOM操作，希望对大家也有所帮助。

上一篇: idea打包java可执行jar包

下一篇: 我的Java GUI界面开发经验分享

评论区

()

相似文章