css。显示隐藏的标签 |html css代码大全免费

// 定义一个包裹隐藏/显示元素的容器
<div id="container">
// 定义需要隐藏/显示的元素
<p id="hide_p">偶是需要隐藏的元素</p>
<p id="show_p">偶是需要显示的元素</p>
</div>
// 添加点击事件，隐藏‘隐藏元素’，显示‘显示元素’
document.getElementById('container').addEventListener('click', () =>{
document.getElementById('hide_p').style.display = "none";
document.getElementById('show_p').style.display = "block";
});

在上述代码中，大家首先定义了一个id为container的div元素，这个div包含了两个需要切换的p元素hide_p和show_p。hide_p元素默认是需要隐藏的，而show_p元素默认是需要显示的，但是因为style属性中设置为”display:none”，所以一开始不会显示。之后，大家添加了一个点击事件，当用户点击container时，隐藏hide_p元素，显示show_p元素。大家可以使用display属性来控制元素的显示和隐藏，将其设置为”none”表示隐藏，”block”表示显示。

需要注意的是，这里只是一个简单的演示，实际应用中，大家可能还需要考虑更多的情况，比如同时显示多个元素，或者需要设置一些过渡效果等等。不过无论如何，CSS中的display属性是非常有用的，可以轻松地实现对元素的显示和隐藏控制。