HTML怎么实现选择显示隐藏
在HTML中，我们可以使用多种方法来实现选择显示隐藏的功能，本文将介绍三种常见的方法：使用JavaScript、使用CSS和使用jQuery。
使用JavaScript
1、创建一个HTML文件，添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏示例</title>
</head>
<body>
<h3>点击按钮显示/隐藏段落：</h3>
<button onclick="toggleDisplay()">点击切换</button>
<p id="myParagraph">这是一个段落，点击按钮可以显示或隐藏它。</p>
<script>
function toggleDisplay() {
var paragraph = document.getElementById("myParagraph");
if (paragraph.style.display === "none") {
paragraph.style.display = "block";
} else {
paragraph.style.display = "none";
}
}
</script>
</body>
</html>
2、在浏览器中打开该HTML文件，点击按钮可以实现显示和隐藏段落的功能。
使用CSS
1、创建一个HTML文件，添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏示例</title>
</head>
<body>
<h3>点击按钮显示/隐藏段落：</h3>
<button onclick="toggleDisplay()">点击切换</button>
<p id="myParagraph" style="display:none;">这是一个段落，点击按钮可以显示或隐藏它。</p>
</body>
</html>
2、在浏览器中打开该HTML文件，点击按钮可以实现显示和隐藏段落的功能，这种方法的优点是不需要编写额外的JavaScript代码，但缺点是无法在不刷新页面的情况下实现状态的切换。
使用jQuery
1、首先需要引入jQuery库，可以从官网下载或者使用CDN链接：https://jquery.com/download/，在HTML文件的<head>标签内添加以下代码：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2、在HTML文件中添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>显示隐藏示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h3>点击按钮显示/隐藏段落：</h3>
<button onclick="toggleDisplay()">点击切换</button>
<p id="myParagraph" style="display:none;">这是一个段落，点击按钮可以显示或隐藏它。</p>
<script>
$(document).ready(function(){
$("myParagraph").click(function(){$(this).toggle();}); // 点击事件绑定到段落元素上，实现显示和隐藏功能。$(this)表示当前被点击的元素。$(this).toggle();表示切换当前元素的可见性。$(this).css("display", "none");表示将当前元素的CSS display属性设置为none,使其隐藏。$(this).css("display", "block");表示将当前元素的CSS display属性设置为block,使其显示。}); // jQuery的ready函数确保在DOM加载完成后执行内部的脚本。$("myParagraph").click(function(){$(this).toggle();}); // 点击事件绑定到段落元素上，实现显示和隐藏功能。$(this)表示当前被点击的元素。$(this).toggle();表示切换当前元素的可见性。$(this).css("display", "none");表示将当前元素的CSS display属性设置为none,使其隐藏。$(this).css("display", "block");表示将当前元素的CSS display属性设置为block,使其显示。// 其他jQuery相关操作可以参考官方文档：https://api.jquery.com/category/selectors/
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/161676.html
微信扫一扫 