可以上這個頁面直接看到效果
http://js.do/chrixtal/divshowornot
[pastacode lang=”markup” manual=”%3Chtml%3E%0A%0A%3Chead%3E%0A%20%20%20%20%3Ctitle%3E%E9%A1%AF%E7%A4%BA%E8%88%87%E9%9A%B1%E8%97%8F%E7%9A%84%E6%8E%A7%E5%88%B6%3C%2Ftitle%3E%0A%0A%20%20%20%20%3C!–%202018.08.26%20Created%20by%20Chris%20Yang–%3E%0A%20%20%20%20%3C!–%20%E6%AD%A4%E6%AE%B5%E7%A8%8B%E5%BC%8F%E5%B1%95%E7%A4%BA%E5%A6%82%E4%BD%95%E9%A1%AF%E7%A4%BA%E8%88%87%E9%9A%B1%E8%97%8F%20HTML%20%E5%8D%80%E5%A1%8A–%3E%0A%20%20%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%2F%2F%20%E5%AE%9A%E7%BE%A9%E4%B8%80%E5%80%8B%E5%87%BD%E5%BC%8F%EF%BC%8C%E6%9C%83%E5%82%B3%E5%85%A5%E9%A0%81%E7%A2%BC(vPage)%2C%20%E5%8F%AA%E6%9C%89%E6%8C%87%E5%AE%9A%E9%A0%81%E6%9C%83%E9%A1%AF%E7%A4%BA%20%0A%20%20%20%20%20%20%20%20function%20ShoworNot(vPage)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E5%8F%96%E5%BE%97%E5%9B%9B%E5%80%8B%E5%8D%80%E5%A1%8A%EF%BC%8C%E4%B8%A6%E6%BA%96%E5%82%99%E5%81%9A%E5%88%87%E6%8F%9B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20DB1%20%3D%20document.getElementById(%22DivBlock1%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20DB2%20%3D%20document.getElementById(%22DivBlock2%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20DB3%20%3D%20document.getElementById(%22DivBlock3%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20DB4%20%3D%20document.getElementById(%22DivBlock4%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E5%A6%82%E6%9E%9C%E6%98%AF%E7%AC%AC%E4%B8%80%E9%A0%81%EF%BC%8C%E5%8F%AA%E6%9C%89%E7%AC%AC%E4%B8%80%E9%A0%81%E7%9A%84%20display%20%E6%98%AF%20block(%E9%A1%AF%E7%A4%BA)%EF%BC%8C%E5%85%B6%E4%BB%96%E9%83%BD%E6%98%AF%20none%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(vPage%20%3D%3D%201)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB1.style.display%20%3D%20’block’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB2.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB3.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB4.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%E4%BE%9D%E6%AD%A4%E9%A1%9E%E6%8E%A8%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(vPage%20%3D%3D%202)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB1.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB2.style.display%20%3D%20’block’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB3.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB4.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(vPage%20%3D%3D%203)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB1.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB2.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB3.style.display%20%3D%20’block’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB4.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(vPage%20%3D%3D%204)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB1.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB2.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB3.style.display%20%3D%20’none’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20DB4.style.display%20%3D%20’block’%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%0A%3Cbody%3E%0A%0A%20%20%20%20%3C!–%20Block%201%20–%3E%0A%20%20%20%20%3C!–%20id%20%E5%B0%B1%E6%98%AF%E6%88%91%E5%80%91%E8%A6%81%E6%8E%A7%E5%88%B6%E7%9A%84%20DIV%20%E5%8D%80%E5%A1%8A%EF%BC%8C%E5%BE%8C%E9%9D%A2%E7%9A%84%20style%20%E6%8E%A7%E5%88%B6%E4%BB%96%E6%98%AF%E5%90%A6%E9%A1%AF%E7%A4%BA–%3E%0A%20%20%20%20%3Cdiv%20id%3D%22DivBlock1%22%20style%3D%22display%3Ablock%3B%22%3E%0A%20%20%20%20%20%20%20%20I’m%20Block%201%0A%20%20%20%20%20%20%20%20%3Chr%3E%0A%20%20%20%20%20%20%20%20%3C!–%20%E7%95%B6%E9%BB%9E%E6%93%8A%E6%8C%89%E9%88%95%E7%9A%84%E6%99%82%E5%80%99%E5%91%BC%E5%8F%AB%E4%B8%8A%E9%9D%A2%E6%89%80%E6%BA%96%E5%82%99%E5%A5%BD%E7%9A%84%E5%87%BD%E5%BC%8F%EF%BC%8C%E5%8F%AA%E9%A1%AF%E7%A4%BA%E8%A9%B2%E5%8D%80%E5%A1%8A–%3E%0A%20%20%20%20%20%20%20%20%3C!–%20%E5%A6%82%E6%9E%9C%E7%AC%AC%E4%B8%80%E5%80%8B%E5%8D%80%E5%A1%8A%E4%B8%8D%E6%83%B3%E5%BE%80%E5%89%8D%E8%B7%B3%E5%88%B0%E6%9C%80%E5%BE%8C%E4%B8%80%E5%80%8B%E5%8D%80%E5%A1%8A%EF%BC%8C%E6%8A%8A%E7%AC%AC%E4%B8%80%E8%A1%8C%E7%9A%84%20onclick%20%E7%9A%84%E5%B1%AC%E6%80%A7%E6%8B%BF%E6%8E%89%E5%8D%B3%E5%8F%AF%20–%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20onclick%3D%22ShoworNot(4)%3B%22%20value%3D%22%E5%88%87%E6%8F%9B%E7%AC%AC%E5%9B%9B%E5%80%8B%E5%8D%80%E5%A1%8A%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20onclick%3D%22ShoworNot(2)%3B%22%20value%3D%22%E5%88%87%E6%8F%9B%E7%AC%AC%E4%BA%8C%E5%80%8B%E5%8D%80%E5%A1%8A%22%20%2F%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3C!–%20%E4%B8%8B%E9%9D%A2%E5%B0%B1%E9%83%BD%E4%B8%80%E6%A8%A3%20–%3E%0A%20%20%20%20%3Cdiv%20id%3D%22DivBlock2%22%20style%3D%22display%3Anone%3B%22%3E%0A%20%20%20%20%20%20%20%20%E7%AC%AC%E4%BA%8C%E5%80%8B%E5%8D%80%E5%A1%8A%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%BE%80%E5%89%8D%EF%BC%8C%E5%BE%80%E5%BE%8C%0A%20%20%20%20%20%20%20%20%3Chr%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20onclick%3D%22ShoworNot(1)%3B%22%20value%3D%22%E5%88%87%E6%8F%9B%E7%AC%AC%E4%B8%80%E5%80%8B%E5%8D%80%E5%A1%8A%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20onclick%3D%22ShoworNot(3)%3B%22%20value%3D%22%E5%88%87%E6%8F%9B%E7%AC%AC%E4%B8%89%E5%80%8B%E5%8D%80%E5%A1%8A%22%20%2F%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%3Cdiv%20id%3D%22DivBlock3%22%20style%3D%22display%3Anone%3B%22%3E%0A%20%20%20%20%20%20%20%20%E7%AC%AC%E4%B8%89%E5%80%8B%E5%8D%80%E5%A1%8A%0A%20%20%20%20%20%20%20%20%3Chr%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20onclick%3D%22ShoworNot(2)%3B%22%20value%3D%22%E5%88%87%E6%8F%9B%E7%AC%AC%E4%BA%8C%E5%80%8B%E5%8D%80%E5%A1%8A%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20onclick%3D%22ShoworNot(4)%3B%22%20value%3D%22%E5%88%87%E6%8F%9B%E7%AC%AC%E5%9B%9B%E5%80%8B%E5%8D%80%E5%A1%8A%22%20%2F%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%3Cdiv%20id%3D%22DivBlock4%22%20style%3D%22display%3Anone%3B%22%3E%0A%20%20%20%20%20%20%20%20%E6%88%91%E6%98%AF%E6%9C%80%E5%BE%8C%E4%B8%80%E5%80%8B%E5%8D%80%E5%A1%8A%0A%20%20%20%20%20%20%20%20%3Chr%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20onclick%3D%22ShoworNot(3)%3B%22%20value%3D%22%E5%88%87%E6%8F%9B%E7%AC%AC%E4%B8%89%E5%80%8B%E5%8D%80%E5%A1%8A%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20onclick%3D%22ShoworNot(1)%3B%22%20value%3D%22%E5%88%87%E6%8F%9B%E7%AC%AC%E4%B8%80%E5%80%8B%E5%8D%80%E5%A1%8A%22%20%2F%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%0A%3C%2Fbody%3E%0A%0A%3C!–%20That’s%20all%2C%20enjoy%20it!–%3E%0A%3C%2Fhtml%3E%0A%0A” message=”切換 DIV” highlight=”http://js.do/chrixtal/divshowornot” provider=”manual”/]
控制 HTML 區塊的顯示與否
參考範例:
http://www.bkjia.com/webzh/881978.html
http://jessen163.iteye.com/blog/1349975
https://www.webdesigns.com.tw/jquery_tab.asp
http://abgne.tw/jquery/apply-jquery/jquery-yahoo-carousel-animate-ad.html