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

企鹅博客
企鹅博客
企鹅博客
28886
文章
0
评论
2020年9月17日04:49:00 评论 3 views 663字阅读2分12秒

本文主要介绍了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点击链接切换显示隐藏内容的详细内容,更多请关注php教程其它相关文章!

weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
分享一个React的实践项目 js教程

分享一个React的实践项目

上回说到用React写了一个带Header的首页,我们这次实践就使用Redux进行状态管理 Rudex 应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。惟一改变 sta...
history的几种方法 js教程

history的几种方法

history 对象保存着用户上网的浏览记录,从窗口被打开的时刻算起 history.go(num); num 可以取值正负整数,负数表示向后跳转 ( 后退 ) ,正数表示向前跳转 ( 前进 ) ,n...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: