这篇文章给大家分享的是有关JS如何实现点击链接切换显示隐藏内容的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。
具体如下:
先来看看运行效果:
具体代码如下:
<!DOCTYPE html> <html lang="en"> <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如何实现点击链接切换显示隐藏内容”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。