2 页面有1个div,1个显示按钮一个隐藏按钮;点击按钮实现div的出现和消失,提示使用hide()和show()
时间: 2024-02-22 09:57:41 浏览: 23
好的,我明白了。以下是示例代码:
HTML代码:
```html
<div id="myDiv">
这是一个div
</div>
<button id="showBtn">显示</button>
<button id="hideBtn">隐藏</button>
```
JavaScript代码:
```javascript
$(document).ready(function(){
// 点击显示按钮
$("#showBtn").click(function(){
$("#myDiv").show(); // 显示div
});
// 点击隐藏按钮
$("#hideBtn").click(function(){
$("#myDiv").hide(); // 隐藏div
});
});
```
这样,当点击"显示"按钮时,div将会显示出来;当点击"隐藏"按钮时,div将会被隐藏起来。
相关问题
页面有1个div,1个显示按钮一个隐藏按钮;点击按钮实现div的出现和消失,提示使用hide()和show()
好的,我可以为您提供一个使用 jQuery 实现的示例代码,点击显示按钮显示 div,点击隐藏按钮隐藏 div:
```
<!DOCTYPE html>
<html>
<head>
<title>div的出现和消失示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#myDiv {
display: none;
width: 200px;
height: 200px;
background-color: lightblue;
margin: 50px auto;
text-align: center;
line-height: 200px;
font-size: 24px;
}
</style>
</head>
<body>
<h1>div的出现和消失示例</h1>
<button id="showBtn">显示</button>
<button id="hideBtn">隐藏</button>
<div id="myDiv">这是一个 div</div>
<script>
$(document).ready(function() {
// 点击显示按钮显示 div
$("#showBtn").click(function() {
$("#myDiv").show();
});
// 点击隐藏按钮隐藏 div
$("#hideBtn").click(function() {
$("#myDiv").hide();
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用 CSS 将 div 隐藏起来,当点击显示按钮时,使用 jQuery 的 `show()` 函数将其显示出来,当点击隐藏按钮时,使用 jQuery 的 `hide()` 函数将其隐藏起来。
一个按钮鼠标移动到上面是 div显示出来 移走时div隐藏用代码实现一下
好的,这是一个简单的示例代码:
```
<button id="myButton" onmouseover="showDiv()" onmouseout="hideDiv()">按钮</button>
<div id="myDiv" style="display:none;">这是一个div</div>
<script>
function showDiv() {
document.getElementById("myDiv").style.display = "block";
}
function hideDiv() {
document.getElementById("myDiv").style.display = "none";
}
</script>
```
当鼠标移动到按钮上时,调用showDiv()函数显示div;当鼠标移开按钮时,调用hideDiv()函数隐藏div。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)