点击后标签更换颜色和图片
时间: 2023-06-15 13:04:07 浏览: 50
您可以使用 HTML,CSS 和 JavaScript 来实现此功能。以下是一个简单的示例:
HTML 代码:
```
<div class="tag">
<span>标签名称</span>
<img src="默认图片地址" alt="标签图片">
</div>
```
CSS 代码:
```
.tag {
display: inline-block;
padding: 5px 10px;
background-color: #eee;
border-radius: 10px;
cursor: pointer;
}
.tag.selected {
background-color: #ffcc00;
}
.tag img {
width: 20px;
height: 20px;
margin-left: 5px;
}
.tag.selected img {
content: url(选中图片地址);
}
```
JavaScript 代码:
```
const tags = document.querySelectorAll('.tag');
tags.forEach(tag => {
tag.addEventListener('click', () => {
tag.classList.toggle('selected');
});
});
```
上述代码中,我们为每个标签元素添加了一个点击事件监听器。当用户点击标签时,我们使用 `classList.toggle()` 方法来切换 `selected` 类的存在与否。当标签被选中时,我们改变其背景色和图片。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)