HTML 隐藏与显示简例，加详细注解

最新推荐文章于 2025-03-20 04:30:00 发布

垂死挣扎的蚍蜉

最新推荐文章于 2025-03-20 04:30:00 发布

阅读量4.3k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_41835967/article/details/81081919

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实例</title>
    <style type="text/css">
        <!-------设置内边距为0，使body置顶------>
        /*!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。
        语法格式：{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}
        在CSS中，通过对某一样式声明! important ：
        可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级，也就是相当于写在最下面。
        */
        body {padding-top: 0px !important;}
    </style>

</head>

<body>

<!------------js：改变隐藏、显示---------------->
<script type="text/javascript">
    /* 定义函数名字为isHidden,参数为hiddenmenu */
    function isHidden(hiddenmenu)
    {
        /*添加变量，名为 hMenu，通过id获取参数*/
        var hMenu=document.getElementById(hiddenmenu)
        /*设置hMenu display属性：
            如果原来是block（显示），则改为none（隐藏），否则改成block（显示）。
            也可以写成：hMenu.style.display=(hMenu.style.display=='block')?'none':'block';
            作用是每次点击后改变display的属性值，从而改变显示状态
        */
        hMenu.style.display=(hMenu.style.display=='none')?'block':'none';
    }
</script>

<!------------------html------------------->
<!--------点击时调用isHidden函数，参数为HiddenMenu(隐藏内容的id) -------->
<div  onclick="isHidden('HiddenMenu')">
    <p>点此查看</p>
    <!-- 这里设置id为“HiddenMenu”,初始display的属性为none，即隐藏，那么打开网页的时候就不显示 -->
    <div id="HiddenMenu" style="display: none">隐藏的内容</div>
</div>



</body>
</html>

效果：

点击后：