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 相关文章推荐
简明json介绍
Sep 28 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
js判断url是否有效的两种方法
Mar 04 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 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
php4的session功能评述(二)
2006/10/09 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
php多线程并发实现方法
2016/09/30 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Python中为什么要用self探讨
2015/04/14 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
Django 拆分model和view的实现方法
2019/08/16 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
关于工资低的辞职信
2014/01/14 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
建筑安全责任书范本
2014/07/24 职场文书
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server