JS打开链接怎么切换显示隐藏内容

发布时间：2022-06-08 09:05 所属栏目：122 来源：互联网

导读：本文主要介绍了JS实现点击链接切换显示隐藏内容的方法,涉及javascript鼠标事件响应及页面元素属性动态变换相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。先来看看运行效果：具体代码如下： !DOCTYPE html html head meta charset=UTF-8 titlewww.

　　本文主要介绍了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实现点击循环切换显示内容

　　Angular实现日程表功能（可添加及隐藏显示内容）详解

　　JS点击循环切换显示内容的实现方法

　　以上就是JS点击链接切换显示隐藏内容的详细内容。

（编辑：ASP站长网）