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

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

DOCTYPE html>
<html>

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

<body>
    
    <form action="www.baidu.com" method="POST">
        <div>
            
            <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>


<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>

复制如上代码,最终效果如下:

HTML加JS实现点击切换“观看”与“收起”效果切换_第1张图片

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

你可能感兴趣的:(HTML加JS实现点击切换“观看”与“收起”效果切换)