JavaScript之通过按钮实现隐藏和显示

通过按钮实现隐藏与显示

先看下效果:

1、点击前:

JavaScript之通过按钮实现隐藏和显示

2、点击后:

JavaScript之通过按钮实现隐藏和显示

 

代码如下:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过按钮实现隐藏和显示</title>

    <style>
        .body {
            margin: 0 auto;
        }

        #show {
            width: 600px;
            height: auto;
            font-size: 14px;
            background-color: #e4c392;
            display: block;
            padding: 10px;
            margin: 0 auto;
            border-radius: 10px;
        }

        #show h1 {
            color: #11c2ee;
            margin: 0 auto;
        }

        .slide {
            margin: 0 auto;
            padding: 0;
            width: 600px;
            border-top: solid 4px #D6A55C;
        }

        .btn-slide {
            background-color: bisque;
            width: 80px;
            height: 30px;
            text-align: center;
            margin: 0 auto;
            border-radius: 8px;
            margin: 0 auto;
            display: block;
        }
    </style>

    <script type="text/javascript">
        function divshow() {
            document.getElementById("btnshow").style.display="block",
            document.getElementById("btnhref").innerHTML="关闭",
            document.getElementById("btnhref").href="javascript:divhidden()"
        }
        function divhidden() {
            document.getElementById("btnshow").style.display="none",
            document.getElementById("btnhref").innerHTML="了解",
            document.getElementById("btnhref").href="javascript:divshow()"
        }
    </script>
</head>

</head>

<body>
    <div id="show">
        <h1>段落</h1>
        <p>段落是文章中最基本的单位。内容上它具有一个相对完整的意思;在文章中,段具有换行的标。段是由句子或句群组成的,在文章中用于体现作者的思路发展或全篇文章的层次。有的段落只有一个句子,称为独句段,独句段一般是文章的开头段、结尾段、过渡段强调段等特殊的段落。多数段落包括不止一个句子或句群,叫多句段。中文段落开头前一般空两个格。
            段落也常用于日常用语中。例:"现在的工作告一段落",表示达到一定程度暂停的意思。
        </p>

        <div id="btnshow" style="display: none;">
            <p>段落是文章中最基本的单位。内容上它具有一个相对完整的意思;在文章中,段具有换行的标。段是由句子或句群组成的,在文章中用于体现作者的思路发展或全篇文章的层次。有的段落只有一个句子,称为独句段,独句段一般是文章的开头段、结尾段、过渡段强调段等特殊的段落。多数段落包括不止一个句子或句群,叫多句段。中文段落开头前一般空两个格。
                段落也常用于日常用语中。例:"现在的工作告一段落",表示达到一定程度暂停的意思。
            </p>
        </div>
    </div>

    <p class="slide">
        <a href="javascript:divshow()" id="btnhref" class="btn-slide">了解</a>
    </p>

</body>

</html>

通过getElementById()这个方法找到对应元素,进而控制它的style,以此来做对应的功能。

上一篇:sql注入-报错注入


下一篇:Apache Spark机器学习.1.6 机器学习工作流和Spark pipeline