JS實(shí)現(xiàn)點(diǎn)擊循環(huán)切換顯示內(nèi)容的方法
本文實(shí)例講述了JS實(shí)現(xiàn)點(diǎn)擊循環(huán)切換顯示內(nèi)容的方法。分享給大家供大家參考,具體如下:
先來看看運(yùn)行效果:
具體代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn 點(diǎn)擊循環(huán)切換內(nèi)容</title> <style> a { cursor: pointer; color: red; } p { display: none; } </style> </head> <body> <a onclick="con()">循環(huán)切換內(nèi)容</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,因?yàn)樗饕凳菑?開始的 flag = 0; } else { ++flag; } } </script> </body> </html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS回調(diào)函數(shù)基本定義與用法實(shí)例分析
這篇文章主要介紹了JS回調(diào)函數(shù)基本定義與用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript回調(diào)函數(shù)基本概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-05-05JavaScript中使用arguments獲得函數(shù)傳參個(gè)數(shù)實(shí)例
這篇文章主要介紹了JavaScript中使用arguments獲得函數(shù)傳參個(gè)數(shù)實(shí)例,本文用了多個(gè)例子來講解arguments的使用,需要的朋友可以參考下2014-08-08JavaScript動(dòng)態(tài)生成帶刪除行功能的表格
這篇文章主要為大家詳細(xì)介紹了JavaScript動(dòng)態(tài)生成帶刪除行功能的表格,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09基于JS實(shí)現(xiàn)發(fā)送驗(yàn)證碼的計(jì)時(shí)器效果
這篇文章主要為大家詳細(xì)介紹了如何基于JS實(shí)現(xiàn)一個(gè)發(fā)送驗(yàn)證碼的計(jì)時(shí)器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2023-11-11微信小程序使用picker實(shí)現(xiàn)時(shí)間和日期選擇框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用picker實(shí)現(xiàn)時(shí)間和日期選擇框功能,結(jié)合實(shí)例形式分析了微信小程序picker組件進(jìn)行日期與時(shí)間選擇的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12異步j(luò)avascript的原理和實(shí)現(xiàn)技巧介紹
因?yàn)楣ぷ鞯男枰?,我要在網(wǎng)頁端編寫一段腳本,把數(shù)據(jù)通過網(wǎng)頁批量提交到系統(tǒng)中去。所以我就想到了Greasemonkey插件,于是就開始動(dòng)手寫,發(fā)現(xiàn)問題解決得很順利2012-11-11Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
在一些購物商城經(jīng)??吹接泻芏嗌唐纷雒霘⒒顒?dòng),也就是倒計(jì)時(shí),本篇文章給大家介紹Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步),需要的朋友可以了解下2015-09-09