通過HTML與JS實現點擊button按鈕，實現切換效果，可以在js裡面增加自己相應的業務代碼，代碼如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <!-- HTML樣式部分 --> <form acti ...
通過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小程式生成的，需要的話，可以留言！！！
