先来看看运行效果:
具体代码如下:
<!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实现点击循环切换显示内容
angular实现日程表功能(可添加及隐藏显示内容)详解
js点击循环切换显示内容的实现方法
以上就是js点击链接切换显示隐藏内容的详细内容。
