编程 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 相关文章推荐

对联广告js flash激活

Oct 19 Javascript

javascript动态改变img的src属性图片不显示的解决方法

Oct 20 Javascript

3种不同方式的焦点图轮播特效分享

Oct 30 Javascript

为jquery的ajaxfileupload增加附加参数的方法

Mar 04 Javascript

浅谈json取值(对象和数组)

Jun 24 Javascript

jQuery组件easyui对话框实现代码

Aug 25 Javascript

JavaScript变量作用域_动力节点Java学院整理

Jun 27 Javascript

angular2中使用第三方js库的实例

Feb 26 Javascript

react redux入门示例

Apr 19 Javascript

koa socket即时通讯的示例代码

Sep 07 Javascript

微信小程序自定义导航栏

Dec 31 Javascript

JSON的parse()方法介绍

Jan 31 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微信开发之关注事件

2018/06/14 PHP

PHP实现 APP端微信支付功能

2018/06/22 PHP

PHP+mysql防止SQL注入的方法小结

2019/04/27 PHP

php解决crontab定时任务不能写入文件问题的方法分析

2019/09/16 PHP

javascript下IE与FF兼容函数收集

2008/09/17 Javascript

通过继承IHttpHandle实现JS插件的组织与管理

2010/07/13 Javascript

IE事件对象（The Internet Explorer Event Object）

2012/06/27 Javascript

JS.GetAllChild(element,deep,condition)使用介绍

2013/09/21 Javascript

js查找某元素中的所有图片地址的方法

2014/01/16 Javascript

jquery实现select下拉框美化特效代码分享

2015/08/18 Javascript

canvas实现手机端用来上传用户头像的代码

2016/10/20 Javascript

浅谈angularjs $http提交数据探索

2017/01/20 Javascript

jQuery布局组件EasyUI Layout使用方法详解

2017/02/28 Javascript

基于对象合并功能的实现示例

2017/10/10 Javascript

剖析Angular Component的源码示例

2018/03/23 Javascript

Nginx设置为Node.js的前端服务器方法总结

2019/03/27 Javascript

微信小游戏之使用three.js 绘制一个旋转的三角形

2019/06/10 Javascript

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

2019/10/25 Javascript

[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29

2020/10/29 DOTA

Python中关于字符串对象的一些基础知识

2015/04/08 Python

python实现BackPropagation算法

2017/12/14 Python

为什么入门大数据选择Python而不是Java?

2018/03/07 Python

对Python中实现两个数的值交换的集中方法详解

2019/01/11 Python

Python如何获得百度统计API的数据并发送邮件示例代码

2019/01/27 Python

台湾前三大B2C购物网站：MOMO购物网

2017/04/27 全球购物

C#里面如何倒序排列一个数组的元素？

2013/06/21 面试题

Unix如何在一行中运行多个命令

2015/05/29 面试题

社区工作感言

2014/02/21 职场文书

诚信考试承诺书

2014/03/27 职场文书

《云房子》教学反思

2014/04/20 职场文书

初中国旗下的演讲稿

2014/08/28 职场文书

2015年财务个人工作总结范文

2015/05/22 职场文书

天堂的孩子观后感

2015/06/11 职场文书

贴吧吧主申请感言

2015/08/03 职场文书

2019学校请假条格式及范文

2019/06/25 职场文书

Nginx本地配置SSL访问的实例教程

2022/05/30 Servers