鼠标点击一个标签让另一个标签显示,鼠标点击这个标签以外的部分让另一个标签隐藏
时间: 2023-01-28 08:18:47 浏览: 106
您可以使用 JavaScript 实现这个功能。首先,在 HTML 代码中为两个标签添加 id。然后,使用 JavaScript 向点击的标签添加事件监听器,并使用 document.getElementById() 方法获取另一个标签的引用。最后,在事件监听器函数中使用标签引用的 style.display 属性设置显示或隐藏。
例如,假设你有两个标签,一个 id 为 "tag1",另一个 id 为 "tag2"。你可以使用以下代码来实现在点击标签 1 时显示标签 2,点击标签 2 以外的部分隐藏标签 2:
```
<script>
// 获取标签 1 和标签 2 的引用
var tag1 = document.getElementById("tag1");
var tag2 = document.getElementById("tag2");
// 向标签 1 添加点击事件监听器
tag1.addEventListener("click", function() {
// 设置标签 2 的显示状态
tag2.style.display = "block";
});
// 向 body 添加点击事件监听器
document.body.addEventListener("click", function(event) {
// 如果点击的不是标签 2,则隐藏标签 2
if (event.target !== tag2) {
tag2.style.display = "none";
}
});
</script>
```
相关推荐
![application/x-zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![exe](https://img-home.csdnimg.cn/images/20210720083343.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)