通过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小程序生成的，需要的话，可以留言！！！
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
