首页多个span标签，其中三个span中按下其中一个span，变成红色

多个span标签，其中三个span中按下其中一个span，变成红色

时间: 2024-04-21 09:27:29 浏览: 96

如果您只想将其中三个`span`标签中的一个点击后变成红色，您可以在点击事件监听器中添加一些逻辑来实现。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> .red { color: red; } </style> </head> <body> <span class="target">文本1</span> <span class="target">文本2</span> <span>文本3</span> <script> // 获取所有拥有 "target" 类的 span 元素 var targets = document.getElementsByClassName('target'); // 为每个拥有 "target" 类的 span 元素添加点击事件监听器 for (var i = 0; i < targets.length; i++) { targets[i].addEventListener('click', function() { // 移除所有拥有 "red" 类的 span 元素 var redSpans = document.getElementsByClassName('red'); for (var j = 0; j < redSpans.length; j++) { redSpans[j].classList.remove('red'); } // 将当前点击的 span 元素变成红色 this.classList.add('red'); }); } </script> </body> </html> ``` 在上述示例中，我们给需要被点击的三个`span`标签添加了一个自定义的类名`target`。当点击其中一个`target`类的`span`标签时，我们先移除所有具有`red`类的`span`元素的红色样式，然后将当前被点击的`span`元素添加`red`类以改变其颜色。请注意，这里只是一种实现方式，您可以根据自己的需求进行调整和扩展。希望对您有所帮助！

阅读全文