JS实现点击链接切换显示隐藏内容的方法


Posted in Javascript onOctober 19, 2017

本文实例讲述了JS实现点击链接切换显示隐藏内容的方法。分享给大家供大家参考,具体如下:

先来看看运行效果:

JS实现点击链接切换显示隐藏内容的方法

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>3water.com 点击链接切换显示隐藏内容</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>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript this关键字使用分析
Oct 21 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
Oct 25 Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 #Javascript
微信小程序的生命周期的详解
Oct 19 #Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 #Javascript
js 两个日期比较相差多少天的实例
Oct 19 #Javascript
Angular弹出模态框的两种方式
Oct 19 #Javascript
vue使用axios跨域请求数据问题详解
Oct 18 #Javascript
JS实现按钮颜色切换效果
Sep 05 #Javascript
You might like
PHP下判断网址是否有效的代码
2011/10/08 PHP
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
jquery实现提示语淡入效果
2017/05/05 jQuery
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python构建网页爬虫原理分析
2017/12/19 Python
python实现定时提取实时日志程序
2018/06/22 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
详解Python3 pandas.merge用法
2019/09/05 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Python通过format函数格式化显示值
2020/10/17 Python
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
人力资源经理自我评价
2014/01/04 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
小人国观后感
2015/06/11 职场文书
运动会宣传稿50字
2015/07/23 职场文书
员工聘用合同范本
2015/09/21 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL