jquery展示效果代码
时间: 2024-07-01 09:00:45 浏览: 89
jQuery 是一个流行的 JavaScript 框架,常用于简化 HTML 文档遍历、事件处理和动画操作。以下是一个简单的 jQuery 展示和隐藏元素的代码示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 jQuery -->
</head>
<body>
<button id="showHideBtn">Toggle Element</button>
<div id="myElement" style="display: none;">
This is the element to be shown or hidden.
</div>
<script>
// 获取按钮和元素
const button = $('#showHideBtn');
const element = $('#myElement');
// 绑定点击事件
button.click(function() {
// 切换元素的显示状态
element.toggle();
});
</script>
</body>
</html>
```
在这个例子中,当用户点击 "Toggle Element" 按钮时,`#myElement` 元素会切换它的 `display` 样式,如果当前是 `none`(隐藏),则变为 `block`(显示),反之亦然。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)