html、javascript隐藏事件解释

文章目录

简介：
- Javascript简介
- HTML简介
[1. 使用CSS实现隐藏显示](#1. 使用CSS实现隐藏显示)
[2. 使用JavaScript实现隐藏显示](#2. 使用JavaScript实现隐藏显示)
[3. 使用jQuery实现隐藏显示](#3. 使用jQuery实现隐藏显示)

简介：

Javascript简介

Javascript 是一种基于文本的编程语言，主要用于Web开发。它是WWW(万维网)的核心技术之一。

通过使用 Javascript，程序员可以创建交互式和响应式Web元素并增强网站的UI。Javascript 在客户端Web开发中非常流行，以至于互联网上超过97%的网站都将其用于客户端行为。弹出窗口、图像滑块、站点导航菜单、选项卡、表单验证是用于Web开发的Javascript的一些示例。

HTML简介

HTML是超文本标记语言的首字母缩写，它是用于创建网页和Web应用程序的标准标记语言。HTML描述了网页的结构，浏览器从服务器接收HTML页面，然后将文档呈现到屏幕上。

HTML包含多个元素，这些元素告诉浏览器内容的外观。例如，

标签定义了一个段落，定义了web文档的标题，定义了可见的页面内容，<table>定义了一个表格等等。HTML可以嵌入脚本程序如JS程序会影响网页的内容和行为。此外，它可以包含 CSS(层叠样式表)来改善网页的布局和外观。</table>

1. 使用CSS实现隐藏显示

CSS是一种用于控制Web页面样式的语言，它可以通过设置display属性来实现元素的隐藏和显示。当display属性被设置为none时，元素就会被隐藏；当display属性被设置为block或inline等其他值时，元素就会被显示。

下面是一个使用CSS实现隐藏显示的示例：

html 复制代码

<style>
.box {
display: none;
}
.button:hover + .box {
display: block;
}
</ style>
<button class="button">显示/隐藏内容</button>
<div class="box">这是要显示/隐藏的内容</div>

以上代码中，我们定义了一个class为box的元素，并设置其display属性为none，使其默认被隐藏。然后定义了一个class为button的按钮，当鼠标滑过此按钮时，就可以显示box元素，使用+选择器可以选中紧跟在button后面的box元素。

2. 使用JavaScript实现隐藏显示

JavaScript是一种常用于Web页面交互的脚本语言，它可以通过控制元素的style属性来实现隐藏和显示。当style.display属性被设置为none时，元素就会被隐藏；当style.display属性被设置为block或inline等其他值时，元素就会被显示。

下面是一个使用JavaScript实现隐藏显示的示例：

html 复制代码

<button onclick="toggle()">显示/隐藏内容</button>
<div id="box" style="display: none; ">这是要显示/隐藏的内容</div>
<script>
function toggle() {
var box = document.getElementById ( "box");
if (box.style.display === "none") {
box.style.display = "block";}else i
box.style.display = "none";
}
}
</script>

以上代码中，我们定义了一个id为box的元素，并设置其style.display属性为none，使其默认被隐藏。然后定义了一个toggle()函数，用于控制box元素的显示和隐藏。当按钮被点击时，toggle()函数会判断box元素的当前状态，如果为隐藏状态，则将其显示出来；如果为显示状态，则将其隐藏起来。

3. 使用jQuery实现隐藏显示

jQuery是一个常用于Web页面开发的JavaScript库，它可以大大简化JavaScript的编码复杂度。使用jQuery的hide()和show()方法可以实现元素的隐藏和显示。

下面是一个使用jQuery实现隐藏显示的示例：

html 复制代码

<button id="toggle">显示/隐藏内容</button>
<div id="box" style="display: none;">这是要显示/隐藏的内容</div>
<script src="https: / /code.jquery.com/jquery-3.5.1.min.js"></script><script>
$( "#toggle").click(function() {
$("#box" ).toggle();
});
</script>

以上代码中，我们使用了jQuery库，并绑定了toggle()函数到toggle按钮的click事件上。当按钮被点击时，toggle()函数会根据box元素的当前状态来判断是显示还是隐藏。