HTML加JS实现点击切换“观看”与“收起”效果切换

通过HTML与JS实现点击button按钮，实现切换效果，可以在js里面增加自己相应的业务代码，代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <!-- HTML样式部分 -->
    <form action="www.baidu.com" method="POST">
        <div>
            <!-- 点击事件里面加return false;防止在from中的button事件点击后跳转问题 -->
            <button type="button" id="displayBtn" style="width:110px;height:34px; border-radius:8px; background-color:#127587; display:block;" onclick="DisplayAndHiddenBtn('d'); return false;"><font size="2" color="white">点击加载漫画</font></button>
            <button type="button" id="hiddenBtn" style="width:110px;height:34px; border-radius:8px; background-color:#DC143C; display:none;" onclick="DisplayAndHiddenBtn('h'); return false;"><font size="2" color="white">点击收起漫画</font></button>
        </div>
    </form>
</body>

<!-- js代码部分 -->
<script>
    function DisplayAndHiddenBtn(type) { 
        if (type == "d") {
            displayBtn.style.display = "none"; //style中的display属性
            hiddenBtn.style.display = "block";
            console.log('观看')
        }
        else if (type == "h") {
            displayBtn.style.display = "block"; //style中的display属性
            hiddenBtn.style.display = "none";
            console.log('收起')
        }
    }
</script>
</html>

复制如上代码，最终效果如下：

ps:上面操作是通过一个gif小程序生成的，需要的话，可以留言！！！

posted @ 2020-06-10 10:46  在斑马线上散布  阅读(802)  评论(0)  编辑  收藏  举报
夫人不言，言必有中。这是高级臣僚的一种可贵品质，言辞精炼，直抵要害。