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;
    }
    p {
      display: none;
    }
  </style>
</head>
<body>
  <a onclick="con()">循环切换内容</a>
  <p>11111</p>
  <p>22222</p>
  <p>33333</p>
  <script>
    //可以换成切换图片等等
    flag = 0;
    pre = 0;
    function con(){
      var cons = document.getElementsByTagName("p");
      document.getElementsByTagName("p")[pre].style.display = "none";
      document.getElementsByTagName("p")[flag].style.display = "inline";
      console.log(flag);
      pre = flag;
      if(flag == cons.length - 1) { //注意是cons.length-1,因为索引值是从0开始的
        flag = 0;
      } else {
        ++flag;
      }
    }
  </script>
</body>
</html>

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

Javascript 相关文章推荐
js替代copy(示例代码)
Nov 27 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
新手简单了解vue
May 29 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 #Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 #Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 #Javascript
微信小程序支付之c#后台实现方法
Oct 19 #Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 #Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 #Javascript
微信小程序的生命周期的详解
Oct 19 #Javascript
You might like
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
python根据路径导入模块的方法
2014/09/30 Python
Python实现简单的可逆加密程序实例
2015/03/05 Python
Python教程之全局变量用法
2016/06/27 Python
Pandas 数据框增、删、改、查、去重、抽样基本操作方法
2018/04/12 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
英国二手物品交易网站:Preloved
2017/10/06 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
优秀经理获奖感言
2014/03/04 职场文书
动员大会主持词
2014/03/20 职场文书
就业推荐表导师评语
2014/12/31 职场文书
工程资料员岗位职责
2015/04/13 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS