如何用CSS为span标签点击添加高亮效果？

要为 span 标签在点击时添加高亮效果，你可以使用 CSS 和 JavaScript 来实现。以下是一个简单的示例：

HTML

<span class="highlightable">点击我</span>

CSS

.highlightable {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #ccc;
}

.highlightable.active {
    background-color: yellow; /* 高亮颜色 */
    border-color: yellow;
}

JavaScript

document.querySelector('.highlightable').addEventListener('click', function() {
    this.classList.toggle('active');
});

解释

1. HTML: 我们有一个 span 标签，并给它一个类名 highlightable，以便我们可以通过 CSS 和 JavaScript 来操作它。

2. CSS:

   • .highlightable 类定义了 span 的默认样式，包括光标样式、内边距和边框。
   • .highlightable.active 类定义了点击后的高亮效果，背景颜色和边框颜色都变为黄色。

3. JavaScript:

   • 我们使用 document.querySelector 选择 .highlightable 元素，并为其添加一个点击事件监听器。
   • 当用户点击 span 时，classList.toggle('active') 方法会在 span 上切换 active 类。如果 active 类已经存在，它将被移除；如果不存在，它将被添加。

效果

• 当用户点击 span 时，背景颜色和边框颜色会变为黄色，再次点击时，高亮效果会消失。

扩展

如果你有多个 span 标签需要高亮效果，可以使用 querySelectorAll 来为所有 span 添加事件监听器：

document.querySelectorAll('.highlightable').forEach(function(span) {
    span.addEventListener('click', function() {
        this.classList.toggle('active');
    });
});

这样，所有的 span 标签都可以在点击时切换高亮效果。