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-05
JavaScript中使用arguments獲得函數(shù)傳參個(gè)數(shù)實(shí)例
這篇文章主要介紹了JavaScript中使用arguments獲得函數(shù)傳參個(gè)數(shù)實(shí)例,本文用了多個(gè)例子來講解arguments的使用,需要的朋友可以參考下2014-08-08
基于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(wǎng)頁端編寫一段腳本,把數(shù)據(jù)通過網(wǎng)頁批量提交到系統(tǒng)中去。所以我就想到了Greasemonkey插件,于是就開始動手寫,發(fā)現(xiàn)問題解決得很順利2012-11-11
Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步)
在一些購物商城經(jīng)??吹接泻芏嗌唐纷雒霘⒒顒?,也就是倒計(jì)時(shí),本篇文章給大家介紹Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)(時(shí)間與服務(wù)器時(shí)間同步),需要的朋友可以了解下2015-09-09

