JS点击循环切换显示内容的实现方法
这篇文章主要介绍了JS实现点击循环切换显示内容的方法,涉及javascript鼠标事件响应及页面元素的获取、属性设置等相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS实现点击循环切换显示内容的方法。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net 点击循环切换内容</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>以上是JS点击循环切换显示内容的实现方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Microsoft Edge浏览器打开是360导航怎么改-更改打开是360导航的方法
Mar 04, 2024 pm 01:50 PM
怎么更改MicrosoftEdge浏览器打开是360导航的页面呢?其实很简单，那么现在小编就和大家一起分享关于更改MicrosoftEdge浏览器打开是360导航页面的方法，有需要的朋友可以来看看哦，希望可以帮助到大家。打开MicrosoftEdge浏览器。我们看到是下图这种页面。点击右上角的三点图标。点击“设置”。在设置页面的左侧栏里点击“启动时”。点击右侧栏里的图中示意的三点(不要能点击“打开新标签页”)，然后点击编辑，将网址改成“0”(或其他无意义的数字)。然后点击“保存”。接下来，选择“
桌面布局已锁定的原因及解决方法
Feb 19, 2024 pm 06:08 PM
显示桌面布局已锁定是怎么回事在使用计算机的过程中，有时我们可能会遇到显示桌面布局已锁定的情况。这个问题意味着我们无法自由地调整桌面图标的位置或改变桌面背景等操作。那么，显示桌面布局已锁定到底是怎么回事呢？一、理解桌面布局和锁定功能首先，我们需要了解桌面布局和桌面锁定这两个概念。桌面布局是指桌面上各个元素的排列方式，包括快捷方式、文件夹和小部件等。我们可以自由
如何让远程桌面连接显示对方的任务栏
Jan 03, 2024 pm 12:49 PM
远程桌面连接使用的用户非常多，很多用户在使用的时候都会遇到些小问题，比如没有显示对方的任务栏，其实很可能是对方的设置问题，下面就来看看解决方法吧。远程桌面连接怎么显示对方的任务栏：1、首先点击“设置”。2、然后再打开“个性化”。3、随后选择左侧的“任务栏”4、将图中隐藏任务栏选项关闭即可。
Cheat Engine如何设置中文？Cheat Engine设置中文方法
Mar 13, 2024 pm 04:49 PM
CheatEngine是一款游戏编辑器，能够对游戏的内存进行编辑修改。但是它的默认语言是非中文的，对于很多小伙伴来说比较不方便，那么CheatEngine怎么设置中文呢？今天小编就给大家详细介绍一下CheatEngine设置中文的方法，希望可以帮助到你。 设置方法一 1、双击打开软件，点击左上角的“edit”。 2、接着点击下方选项列表中的“settings”。 3、在打开的窗口界面中，点击左侧栏中的“languages”
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
Microsoft Edge在哪设置显示下载按钮-Microsoft Edge设置显示下载按钮的方法
Mar 06, 2024 am 11:49 AM
大家知道MicrosoftEdge在哪设置显示下载按钮吗?下文小编就带来了MicrosoftEdge设置显示下载按钮的方法，希望对大家能够有所帮助，一起跟着小编来学习一下吧!第一步：首先打开MicrosoftEdge浏览器，单击右上角【...】标识，如下图所示。第二步：然后在弹出菜单中，单击【设置】，如下图所示。第三步：接着单击界面左侧【外观】，如下图所示。第四步：最后单击【显示下载按钮】右侧按钮，由灰变蓝即可，如下图所示。上面就是小编为大家带来的MicrosoftEdge在哪设置显示下载按钮的
怎么显示wifi密码二维码 推荐无线密码微信扫一扫3秒搞定
Feb 20, 2024 pm 01:42 PM
WIFI密码不用经常输入，所以忘记了也很正常，今天我教大家一个最简单的方法来查到自己家WIFI的密码，3秒搞定。WIFI密码那就是用微信的扫一扫来查看，本方法的前提是：要有一台手机能连上过WIFI。好了，下面开始操作教程：步骤1、我们进入手机，从手机顶部下拉，调出状态栏，WIFI图标步骤2、长按WIFI图标，进入WLAN设置；长按WIFI图标步骤3、点击已经连接上的自己家的WIFI名称，点击分享密码，它会弹出来二维码；分享WIFI密码步骤4、我们截图保存此二维码；步骤5、桌面长按微信图标，点击扫
Linux 中如何查看当前目录？
Feb 23, 2024 pm 05:54 PM
在Linux系统中，要显示当前路径可以使用pwd命令。pwd命令是PrintWorkingDirectory的缩写，用于显示当前工作目录的路径。在终端中输入以下命令即可显示当前路径：pwd执行该命令后，终端会显示当前工作目录的完整路径，如：/home/user/Documents。另外，还可以使用一些其他选项来增强pwd命令的功能，例如-P选项可以显示出
