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”
如何讓遠端桌面連線顯示對方的工作列
Jan 03, 2024 pm 12:49 PM
遠端桌面連線使用的使用者非常多，很多使用者在使用的時候都會遇到些小問題，例如沒有顯示對方的任務欄，其實很可能是對方的設定問題，下面就來看看解決方法吧。遠端桌面連線怎麼顯示對方的工作列：1、先點選「設定」。 2、然後再開啟「個人化」。 3、隨後選擇左側的「工作列」4、將圖中隱藏工作列選項關閉即可。
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
Linux 中如何查看目前目錄？
Feb 23, 2024 pm 05:54 PM
在Linux系統中，要顯示目前路徑可以使用pwd指令。 pwd指令是PrintWorkingDirectory的縮寫，用來顯示目前工作目錄的路徑。在終端機中輸入以下指令即可顯示目前路徑：pwd執行指令後，終端機會顯示目前工作目錄的完整路徑，如：/home/user/Documents。另外，還可以使用一些其他選項來增強pwd指令的功能，例如-P選項可以顯示出
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、桌面長按微信圖標，點擊掃
