html 实现对文本的显示和隐藏,3按钮显示和隐藏HTML的文本
时间: 2024-02-09 15:11:09 浏览: 24
可以使用 JavaScript 和 CSS 来实现对 HTML 文本的显示和隐藏。下面是一个示例代码,使用了三个按钮来实现显示和隐藏 HTML 的文本:
HTML 代码:
```html
<button onclick="showText()">显示文本</button>
<button onclick="hideText()">隐藏文本</button>
<button onclick="toggleText()">切换文本</button>
<div id="text" style="display: none;">
<p>这是要显示和隐藏的文本。</p>
</div>
```
JavaScript 代码:
```javascript
function showText() {
document.getElementById("text").style.display = "block";
}
function hideText() {
document.getElementById("text").style.display = "none";
}
function toggleText() {
var text = document.getElementById("text");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
```
CSS 代码:
```css
#text {
display: none;
}
```
在这个示例中,我们使用了三个按钮来控制文本的显示和隐藏,分别是“显示文本”、“隐藏文本”和“切换文本”。当用户点击这些按钮时,对应的 JavaScript 函数会被调用,从而修改文本的 CSS 样式来实现显示和隐藏。其中,toggleText() 函数可以用于切换文本的显示和隐藏状态。CSS 样式中的 display: none; 可以将文本设置为隐藏状态。