span标签的点击事件，如何让点击的按钮有选中的高亮状态？

Question

span标签的点击事件，如何让点击的按钮有选中的高亮状态？

Answer 1

可以使用:hover :active :focus等伪类选择器去实现

:hover在悬停的时候触发
:active在鼠标按下的时候触发，鼠标抬起就会失效
:focus在聚焦的时候触发，失去焦点的时候失效。需要注意的是，p、span等元素默认不具备聚焦功能，需要在元素上添加tabindex属性，让其具备聚焦功能，比如tabindex="1"

Answer 2

你的意思是不是点击span标签，但是要让它的父级高亮？如果是的话，直接把事件绑定在父级上

dom结构：

<div class="container">
    <div class="btn_content" id="btn_content">
        <span id="text">点我</span>
    </div>
</div>

css样式：

.btn_content.chooosed{
    background: cadetblue;
}

script:

document.querySelector('#btn_content').addEventListener('click', evt => {
    const {currentTarget} = evt;
    currentTarget.classList.add('chooosed');
})