编程 Javascript

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程序设计有所帮助。

JS实现点击循环切换显示内容的方法

- Author -

spfLinux

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

有效提高JavaScript执行效率的几点知识

Jan 31 Javascript

深入理解JavaScript中的块级作用域、私有变量与模块模式

Oct 31 Javascript

bootstrap下拉菜单使用方法解析

Jan 13 Javascript

jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例

Feb 14 Javascript

H5手机端多文件上传预览插件

Apr 21 Javascript

Angular.js中ng-include用法及多标签页面的实现方式详解

May 07 Javascript

详解axios在vue中的简单配置与使用

May 10 Javascript

详述 Sublime Text 打开 GBK 格式中文乱码的解决方法

Oct 26 Javascript

Vue.js单向绑定和双向绑定实例分析

Aug 14 Javascript

React生命周期原理与用法踩坑笔记

Apr 28 Javascript

ES6 Symbol在对象中的作用实例分析

Jun 06 Javascript

了不起的11个JavaScript代码重构最佳实践小结

Jan 11 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

动态网站web开发 PHP、ASP还是ASP.NET

2006/10/09 PHP

在PWS上安装PHP4.0正式版

2006/10/09 PHP

PHP程序开发范例学习之表单获取文本框的值

2011/08/08 PHP

解决file_get_contents无法请求https连接的方法

2013/12/17 PHP

PHP统计当前在线用户数实例讲解

2015/10/21 PHP

javascript数字格式化通用类 accounting.js使用

2012/08/24 Javascript

js获取本机的外网/广域网ip地址完整源码

2013/08/12 Javascript

Javascript浅谈之引用类型

2013/12/18 Javascript

jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

2016/01/18 Javascript

JavaScript数据结构与算法之链表

2016/01/29 Javascript

npm 下载指定版本的组件方法

2018/05/17 Javascript

js实现web调用摄像头 js截取视频画面

2019/04/21 Javascript

微信小程序的引导页实现代码

2020/06/24 Javascript

[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11

2020/12/13 DOTA

python中Genarator函数用法分析

2015/04/08 Python

python字符类型的一些方法小结

2016/05/16 Python

【Python】Python的urllib模块、urllib2模块批量进行网页下载文件

2016/11/19 Python

Python加密方法小结【md5,base64,sha1】

2017/07/13 Python

利用python3随机生成中文字符的实现方法

2017/11/24 Python

Python使用Matplotlib实现Logos设计代码

2017/12/25 Python

解决Pycharm下面出现No R interpreter defined的问题

2018/10/29 Python

pycharm重命名文件的方法步骤

2019/07/29 Python

python同步windows和linux文件

2019/08/29 Python

Python Django中的STATIC_URL 设置和使用方式

2020/03/27 Python

西班牙品牌鞋子、服装和配饰在线商店：Esdemarca

2021/02/17 全球购物

ajax是什么及其工作原理

2012/02/08 面试题

大学四年的个人自我评价

2014/01/14 职场文书

开会迟到检讨书

2014/02/03 职场文书

教师专业自荐书范文

2014/02/10 职场文书

应届生自荐信范文

2014/02/21 职场文书

绿色城市实施方案

2014/03/19 职场文书

化学教育专业求职信

2014/07/08 职场文书

群众路线教育实践活动民主生活会个人检查对照思想汇报

2014/10/04 职场文书

音乐教师求职信范文

2015/03/20 职场文书

大国崛起日本观后感

2015/06/02 职场文书

Java8 Stream API 提供了一种高效且易于使用的处理数据的方式

2022/04/13 Java/Android