css3 显示隐藏div

CSS3提供了一种非常便捷的方式来实现显示和隐藏div的效果。我们可以使用其内置的“display”属性来控制div的显示或隐藏。

.hide {
    display: none;
}
.show {
    display: block;
}

上述代码中，我们定义了两个class分别为“hide”和“show”。通过“display”属性，我们可以将“hide”类的div隐藏起来，而让“show”类的div显示出来。

如果我们想要实现一个点击按钮显示或隐藏某个div的效果，可以通过JavaScript代码来实现：

function toggleDiv() {
    var div = document.getElementById("myDiv");
if (div.style.display === "none") {
    div.style.display = "block";
}
 else {
    div.style.display = "none";
}
}
    

上述代码中，我们定义了一个名为“toggleDiv”的函数，用于控制div的显示或隐藏。

在HTML中，我们可以通过以下方式来使用上述代码：

div id="myDiv" class="hide">
    我是一个被隐藏的div/div>
    button onclick="toggleDiv()">
    点击我显示或隐藏div/button>
    

上述代码中，我们先将div的id设置为“myDiv”，并且将其初始化为“hide”类，即隐藏状态。而按钮的onclick事件绑定到了“toggleDiv”函数上，点击按钮即可实现div的显示或隐藏。

通过上述方法，我们可以轻松地实现div的显示或隐藏效果，从而让网页变得更加灵动和美观。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！