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脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++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
显示桌面布局已锁定是怎么回事在使用计算机的过程中，有时我们可能会遇到显示桌面布局已锁定的情况。这个问题意味着我们无法自由地调整桌面图标的位置或改变桌面背景等操作。那么，显示桌面布局已锁定到底是怎么回事呢？一、理解桌面布局和锁定功能首先，我们需要了解桌面布局和桌面锁定这两个概念。桌面布局是指桌面上各个元素的排列方式，包括快捷方式、文件夹和小部件等。我们可以自由
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
如何让远程桌面连接显示对方的任务栏
Jan 03, 2024 pm 12:49 PM
远程桌面连接使用的用户非常多，很多用户在使用的时候都会遇到些小问题，比如没有显示对方的任务栏，其实很可能是对方的设置问题，下面就来看看解决方法吧。远程桌面连接怎么显示对方的任务栏：1、首先点击“设置”。2、然后再打开“个性化”。3、随后选择左侧的“任务栏”4、将图中隐藏任务栏选项关闭即可。
Linux 中如何查看当前目录？
Feb 23, 2024 pm 05:54 PM
在Linux系统中，要显示当前路径可以使用pwd命令。pwd命令是PrintWorkingDirectory的缩写，用于显示当前工作目录的路径。在终端中输入以下命令即可显示当前路径：pwd执行该命令后，终端会显示当前工作目录的完整路径，如：/home/user/Documents。另外，还可以使用一些其他选项来增强pwd命令的功能，例如-P选项可以显示出
如何在JavaScript中获取HTTP状态码的简单方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务
Microsoft Edge在哪设置显示下载按钮-Microsoft Edge设置显示下载按钮的方法
Mar 06, 2024 am 11:49 AM
大家知道MicrosoftEdge在哪设置显示下载按钮吗?下文小编就带来了MicrosoftEdge设置显示下载按钮的方法，希望对大家能够有所帮助，一起跟着小编来学习一下吧!第一步：首先打开MicrosoftEdge浏览器，单击右上角【...】标识，如下图所示。第二步：然后在弹出菜单中，单击【设置】，如下图所示。第三步：接着单击界面左侧【外观】，如下图所示。第四步：最后单击【显示下载按钮】右侧按钮，由灰变蓝即可，如下图所示。上面就是小编为大家带来的MicrosoftEdge在哪设置显示下载按钮的
