通過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小程式生成的，需要的話，可以留言！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/72133.html
標籤：JavaScript