实现文字隐藏和显示的过渡效果。单击“隐藏文字”按钮隐藏文字,同时“隐藏文字”按钮变为“显示文字”按钮,单击“显示文字”按钮显示文字,同时“显示文字”按钮变为“隐藏文字”按钮。要求完整一次性代码
时间: 2023-10-21 19:03:40 浏览: 31
HTML部分:
```
<button id="toggleButton">隐藏文字</button>
<p id="text">这是要隐藏和显示的文字。</p>
```
CSS部分:
```
#text {
opacity: 1;
transition: opacity 0.5s;
}
#text.hidden {
opacity: 0;
}
```
JavaScript部分:
```javascript
const toggleButton = document.getElementById('toggleButton');
const text = document.getElementById('text');
let hidden = false;
toggleButton.addEventListener('click', () => {
hidden = !hidden;
if (hidden) {
text.classList.add('hidden');
toggleButton.textContent = '显示文字';
} else {
text.classList.remove('hidden');
toggleButton.textContent = '隐藏文字';
}
});
```
解释:
首先,HTML部分定义了按钮和要隐藏和显示的文本。
CSS部分定义了文本的初始状态和过渡效果。在文本隐藏时,其透明度变为0,从而实现了过渡效果。
JavaScript部分则通过添加和移除CSS类来实现文本的隐藏和显示。当单击“隐藏文字”按钮时,JavaScript将hidden变量设置为true,然后将CSS类hidden添加到文本中,从而实现文本的隐藏。同时,将按钮文本设置为“显示文字”。当单击“显示文字”按钮时,JavaScript将hidden变量设置为false,然后将CSS类hidden从文本中移除,从而实现文本的显示。同时,将按钮文本设置为“隐藏文字”。
最终,单击按钮时,JavaScript将根据hidden变量的值来切换文本的状态和按钮的文本。同时,CSS的transition属性将实现文本隐藏和显示的过渡效果。
完整代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字隐藏和显示的过渡效果</title>
<style>
#text {
opacity: 1;
transition: opacity 0.5s;
}
#text.hidden {
opacity: 0;
}
</style>
</head>
<body>
<button id="toggleButton">隐藏文字</button>
<p id="text">这是要隐藏和显示的文字。</p>
<script>
const toggleButton = document.getElementById('toggleButton');
const text = document.getElementById('text');
let hidden = false;
toggleButton.addEventListener('click', () => {
hidden = !hidden;
if (hidden) {
text.classList.add('hidden');
toggleButton.textContent = '显示文字';
} else {
text.classList.remove('hidden');
toggleButton.textContent = '隐藏文字';
}
});
</script>
</body>
</html>
```
相关推荐
![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)