本文介绍了一种使用CSS和JavaScript实现网页内容显示与隐藏的方法。通过简单的按钮点击事件触发内容区域的高度变化，达到良好的用户体验效果。文章提供了完整的代码示例。
<style>
.btn{width:60px;height:25px;padding-top:3px;border:1px solid #999999;background:#f0f0f0; cursor:hand;}
.showmid{
visibility:visible;
overflow: hidden;
height: 80px;
}
.showall{
display:block;
}
</style>
<script>
function displayDiv(obj)
{
if(obj.className=="showmid")
{
obj.className="showall";
document.getElementById("btnDisplay").value="隐藏";
}
else
{
obj.className="showmid";
document.getElementById("btnDisplay").value="显示全部";
}
}
</script>
<input type="button" name="btnDisplay" value="显示全部" onclick="displayDiv(document.getElementById('divOrders'))" class="btn" />
<div id="divOrders" class="showmid">
asdfasdfasfas
内容
</DIV>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
