当前位置:首页 > SEO教程 > SEO排名教程 >

JS点击链接怎么切换显示隐藏内容

发布时间:2021-07-20 17:28 | 浏览次数:次 | 作者:王牌SEO公司小编| 来源:原创

JS点击链接怎么切换显示隐藏内容
本文主要介绍了JS实现点击链接切换显示隐藏内容的方法,涉及javascript鼠标事件响应及页面元素属性动态变换相关操作技巧,需要的朋友可以参考下,希望能帮助到大家。

先来看看运行效果:

JS点击链接怎么切换显示隐藏内容

具体代码如下:

<!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点击链接切换显示隐藏内容的详细内容

本文由王牌SEO公司原创,转载本文请附带本文链接:http://www.jinuoseo.com/wzjsprogram/5047.html 标明:转自【王牌SEO公司】