本文主要介紹了JS實作點擊連結切換顯示隱藏內容的方法,涉及javascript滑鼠事件回應及頁面元素屬性動態變換相關操作技巧,需要的朋友可以參考下,希望能幫助到大家。
先來看看運行效果:
具體程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>www.jb51.net 点击链接切换显示隐藏内容</title> <style> a { cursor: pointer; color: red; } #p1, #p2 { display: none; } </style> </head> <body> <a onclick="con(1)">显示内容1</a> <a onclick="con(2)">显示内容2</a> <p id="p1">11111</p> <p id="p2">22222</p> <script> flag = "p1"; function con(i){ //参数传递时传递字符串似乎有问题,这里采用的是数字传参 document.getElementById(flag).style.display = "none"; document.getElementById("p" + i).style.display = "inline"; flag = "p" + i; } </script> </body> </html>
相關推薦:
以上是JS點擊連結切換顯示隱藏內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!