鼠标点击一个标签让另一个标签显示,鼠标点击另一个标签以外的部分让另一个标签隐藏
时间: 2023-10-26 08:06:46 浏览: 34
可以使用JavaScript来实现这个功能。具体的步骤是:
1. 在HTML文档中创建两个标签,一个用于点击,另一个用于显示/隐藏。
2. 使用JavaScript代码监听点击标签的点击事件,并在点击时使用```element.style.display = "block"```来显示另一个标签。
3. 创建一个函数来隐藏另一个标签,并在鼠标点击页面的其他部分时调用该函数。
示例代码如下:
```
<!DOCTYPE html>
<html>
<head>
<script>
function showTag() {
document.getElementById("tagToShow").style.display = "block";
}
function hideTag() {
document.getElementById("tagToShow").style.display = "none";
}
document.addEventListener("click", function(event) {
var targetElement = event.target;
if (targetElement.id !== "tagToClick") {
hideTag();
}
});
</script>
</head>
<body>
<p id="tagToClick" onclick="showTag()">点击这里显示标签</p>
<p id="tagToShow" style="display:none">这是要显示/隐藏的标签</p>
</body>
</html>
```
希望这能帮到你!
相关推荐
![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)