JS實現點擊循環切換顯示內容-js教程-PHP中文網

首頁

web前端

js教程

JS實現點擊循環切換顯示內容

小云云

Jan 09, 2018 am 11:20 AM

javascript 切換顯示

本文主要介紹了JS實現點擊循環切換顯示內容的方法,涉及javascript滑鼠事件響應及頁面元素的獲取、屬性設定等相關操作技巧,需要的朋友可以參考下，希望能幫助到大家。

先來看看運行效果：

具體程式碼如下：

<!DOCTYPE html> 
<html> 
<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>

登入後複製

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7794

Java教學

1644

CakePHP 教程

1401

Laravel 教程

1299

PHP教程

1234

Related knowledge

win11家庭版切換專業版操作教學_win11家庭版切換專業版操作教學 Mar 20, 2024 pm 01:58 PM

Win11家庭版怎麼轉換成Win11專業版?在Win11系統中，分為了家庭版、專業版、企業版等，而大部分Win11筆電都是預先安裝Win11家用版系統。而今天小編就帶給大家win11家庭版切換專業版操作步驟!1、先在win11桌面此電腦上右鍵屬性。 2、點選更改產品金鑰或升級windows。 3、然後進入後點選更改產品金鑰。 4.再輸入啟動金鑰：8G7XN-V7YWC-W8RPC-V73KB-YWRDB，選擇下一步。 5.接著就會提示成功，這樣就可以將win11家用版升級win11專業版了。

小米14Ultra如何切換4g和5g？ Feb 23, 2024 am 11:49 AM

小米14Ultra是今年小米中非常火熱的機型之一，小米14Ultra不僅升級了處理器以及各種配置，而且還為用戶們帶來了很多新的功能應用，從小米14Ultra銷售就可以看出來手機的火爆程度，不過有一些常用的功能可能你還沒了解。那麼小米14Ultra如何切換4g和5g呢？下面小編就來為大家介紹一下具體的內容吧！小米14Ultra怎麼換4g和5g？ 1.打開手機的設定選單。 2、設定選單中尋找並選擇「網路」、「行動網路」的選項。 3.在行動網路設定中，會看到「首選網路類型」選項。 4、點選或選擇該選項，會看到

Win10系統如何實現雙系統切換 Jan 03, 2024 pm 05:41 PM

很多朋友剛接觸win系統的時候可能用不習慣，電腦裡存雙系統，這時候其實是可以雙系統切換的，下面就一起來看看兩個系統切換的詳細步驟吧。 win10系統如何兩個系統切換方法一、快捷鍵切換1、按下“win”+“R”鍵開啟運行2、在運行框中輸入“msconfig”點擊“確定”3、在打開的“系統配置”介面中選擇自己需要的系統點擊“設為預設值”，完成後“重新啟動”即可完成切換方法二、開機時選擇切換1、擁有雙系統時開機會出現一個選擇操作介面，可以使用鍵盤“上下”鍵進行選擇系統

桌面佈局已鎖定的原因及解決方法 Feb 19, 2024 pm 06:08 PM

顯示桌面佈局已鎖定是怎麼回事在使用電腦的過程中，有時我們可能會遇到顯示桌面佈局已鎖定的情況。這個問題意味著我們無法自由地調整桌面圖示的位置或改變桌面背景等操作。那麼，顯示桌面佈局已鎖定到底是怎麼回事？一、理解桌面佈局和鎖定功能首先，我們需要了解桌面佈局和桌面鎖定這兩個概念。桌面佈局是指桌面上各元素的排列方式，包括捷徑、資料夾和小工具等。我們可以自由

切換蘋果電腦雙系統啟動方式 Feb 19, 2024 pm 06:50 PM

蘋果雙系統開機怎麼切換蘋果電腦作為一款功能強大的設備，除了搭載自家的macOS作業系統外，也可以選擇安裝其他作業系統，例如Windows，從而實現雙系統的切換。那麼在開機時，我們要如何切換這兩個系統呢？本文就來為大家介紹一下在蘋果電腦上如何實現雙系統的切換。首先，在安裝雙系統之前，我們需要確認自己的蘋果電腦是否支援雙系統切換。一般來說，蘋果電腦都是基於

excel切換工作簿快速鍵的使用方法 Mar 20, 2024 pm 01:50 PM

在excel軟體的應用程式裡，我們已經習慣使用快捷鍵，讓有些操作變得更簡單和快捷，excel的多個表格之間有時候會有相關的數據，我們在查看時，要不停的切換工作簿，如果有更快捷的切換方法，就會省下很多切換浪費的時間，對工作效率的提高有很大的幫助，什麼辦法可以完成快速的切換呢，針對這個問題，小編今天要講的內容是：excel切換工作簿快速鍵的使用方法。 1.首先在開啟的excel表格的下方可以看到有多個工作簿，需要快速切換不同的工作簿，如下圖所示。　　2、然後按下鍵盤上的Ctrl鍵不動，如果需要向右選擇工作

認識全角與半角：切換技巧一覽 Mar 25, 2024 pm 01:36 PM

在日常生活中，我們經常會遇到全角和半角的問題，但可能很少有人深入了解它們的意義和差異。全角和半角，其實是一種字元編碼方式的概念，而在電腦輸入、編輯、排版等方面都有其特殊的應用。本文將深入探討全角和半角的差異、切換技巧以及在實際生活中的應用。首先，全角和半角在漢字文字領域中的定義是：一個全角字元佔用一個字元位置，而一個半角字元佔用半個字元位置。在計算機中，通