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

input的focus方法使用

Mar 13 Javascript

js QQ客服悬浮效果实现代码

Dec 12 Javascript

javascript常见数据验证插件大全

Aug 03 Javascript

jQuery中hover与mouseover和mouseout的区别分析

Dec 24 Javascript

Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

Feb 28 Javascript

使用JavaScript判断手机浏览器是横屏还是竖屏问题

Aug 02 Javascript

Angularjs中使用指令绑定点击事件的方法

Mar 30 Javascript

jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

Oct 20 jQuery

JS实现利用两个队列表示一个栈的方法

Dec 13 Javascript

脚手架vue-cli工程webpack的基本用法详解

Sep 29 Javascript

vue+element创建动态的form表单及动态生成表格的行和列

May 20 Javascript

js定时器出现第一次延迟的原因及解决方法

Jan 04 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可逆加密解密算法实例代码

2014/01/21 PHP

PHP学习笔记（一）简单了解PHP

2014/08/04 PHP

PHP简单装饰器模式实现与用法示例

2017/06/22 PHP

PHP safe_mode开启对于PHP系统函数有什么影响

2020/11/10 PHP

javascript document.referrer 用法

2009/04/30 Javascript

JavaScript 创建对象

2009/07/17 Javascript

修改jquery.lazyload.js实现页面延迟载入

2010/12/22 Javascript

javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

2013/01/23 Javascript

使用AngularJS来实现HTML页面嵌套的方法

2015/06/17 Javascript

js淡入淡出的图片轮播效果代码分享

2015/08/24 Javascript

javascript遍历json对象的key和任意js对象属性实例

2017/03/09 Javascript

利用node.js实现自动生成前端项目组件的方法详解

2017/07/12 Javascript

ES6新增的math,Number方法

2017/08/06 Javascript

vue登录页面cookie的使用及页面跳转代码

2019/07/10 Javascript

微信小程序中button去除默认的边框实例代码

2019/08/01 Javascript

基于Vue.js与WordPress Rest API构建单页应用详解

2019/09/16 Javascript

详解Vue的mixin策略

2020/11/19 Vue.js

js实现鼠标拖曳效果

2020/12/30 Javascript

[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场

2018/04/05 DOTA

[03:01]完美世界DOTA2联赛PWL S2 集锦第二期

2020/12/03 DOTA

[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日赛后选手采访

2021/03/11 DOTA

python求众数问题实例

2014/09/26 Python

PYTHON基础-时间日期处理小结

2018/05/05 Python

python实现简单登陆系统

2018/10/18 Python

Python爬取12306车次信息代码详解

2020/08/12 Python

浅谈对python中if、elif、else的误解

2020/08/20 Python

Django模板报TemplateDoesNotExist异常(亲测可行)

2020/12/18 Python

介绍一下Cookie和Session及他们之间的区别

2012/11/20 面试题

三项教育活动实施方案

2014/03/30 职场文书

团支部建设方案

2014/05/02 职场文书

计算机应用专业毕业生求职信

2014/06/03 职场文书

落实八项规定专题民主生活会对照检查材料

2014/09/15 职场文书

2014年乡镇民政工作总结

2014/12/02 职场文书

文明单位汇报材料

2014/12/24 职场文书

基于Redis位图实现用户签到功能

2021/05/08 Redis

25张裸眼3D图片，带你重温童年的记忆，感受3D的魅力

2022/02/06 杂记