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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
javascript事件冒泡实例分析
May 13 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
Vue精简版风格概述
Jan 30 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 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
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
提高jQuery性能优化的技巧
2015/08/03 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python随机生成指定长度密码的方法
2015/04/04 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
django 多数据库配置教程
2018/05/30 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
pycharm如何使用anaconda中的各种包(操作步骤)
2020/07/31 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
门诊手术室工作制度
2014/01/30 职场文书
社区服务标语
2014/07/01 职场文书
结婚仪式主持词
2015/06/29 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
2017新年晚会开幕词
2016/03/03 职场文书