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

jQuery提交多个表单的小技巧

Jul 27 Javascript

jQuery通过Ajax返回JSON数据

Apr 28 Javascript

用JavaScript动态建立或增加CSS样式表的实现方法

May 20 Javascript

javascript 四十条常用技巧大全

Sep 09 Javascript

有趣的bootstrap走动进度条

Dec 01 Javascript

ES6中参数的默认值语法介绍

May 03 Javascript

react native带索引的城市列表组件的实例代码

Aug 08 Javascript

jquery实现联想词搜索框和搜索结果分页的示例

Oct 10 jQuery

基于vue2.0实现仿百度前端分页效果附实现代码

Oct 30 Javascript

微信小程序用户登录和登录态维护的实现

Dec 10 Javascript

使用 JavaScript 制作页面效果

Apr 21 Javascript

JavaScript高级程序设计之基本引用类型

Nov 17 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 mail 通过Windows的SMTP发送邮件失败的解决方案

2009/05/27 PHP

深入理解curl类,可用于模拟get,post和curl下载

2013/06/08 PHP

PHP实现文字写入图片功能

2019/02/18 PHP

一些老手都不一定知道的JavaScript技巧

2014/05/06 Javascript

jquery+ajax请求且带返回值的代码

2015/08/12 Javascript

Java Mybatis框架入门基础教程

2015/09/21 Javascript

jquery获取url参数及url加参数的方法

2015/10/26 Javascript

JavaScript模块化开发之SeaJS

2015/12/13 Javascript

原生JavaScript实现Ajax的方法

2016/04/07 Javascript

微信小程序实现移动端滑动分页效果（ajax）

2017/06/13 Javascript

webpack实用小功能介绍

2018/01/02 Javascript

原生JS实现$.param() 函数的方法

2018/08/10 Javascript

Angular6封装http请求的步骤详解

2018/08/13 Javascript

Node.js JSON模块用法实例分析

2019/01/04 Javascript

jQuery简单实现根据日期计算星期几的方法

2019/01/09 jQuery

JQuery animate动画应用示例

2019/05/14 jQuery

jQuery实现滑动星星评分效果(每日分享)

2019/11/13 jQuery

[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访神秘商人痛陈生计不易

2018/04/05 DOTA

python 正则表达式概述及常用字符

2009/05/04 Python

python中的函数用法入门教程

2014/09/02 Python

给Python中的MySQLdb模块添加超时功能的教程

2015/05/05 Python

Python 两个列表的差集、并集和交集实现代码

2016/09/21 Python

Django CBV类的用法详解

2019/07/26 Python

python打造爬虫代理池过程解析

2019/08/15 Python

Python3读取和写入excel表格数据的示例代码

2020/06/09 Python

BeautifulSoup中find和find_all的使用详解

2020/12/07 Python

FOREO官方网站：LUNA露娜洁面仪

2016/11/28 全球购物

英国网上超市：Ocado

2020/03/05 全球购物

家长会邀请书

2014/01/25 职场文书

爱护公共设施标语

2014/06/24 职场文书

国企干部对照检查材料

2014/08/22 职场文书

刑事案件上诉状

2015/05/23 职场文书

培根随笔读书笔记

2015/07/01 职场文书

2016教师年度考核评语大全

2015/12/01 职场文书

深度学习详解之初试机器学习

2021/04/14 Python

Nginx 常用配置

2022/05/15 Servers