JS實現(xiàn)點擊循環(huán)切換顯示內(nèi)容的方法
更新時間：2017年10月19日 10:13:52 作者：spfLinux
這篇文章主要介紹了JS實現(xiàn)點擊循環(huán)切換顯示內(nèi)容的方法,涉及javascript鼠標(biāo)事件響應(yīng)及頁面元素的獲取、屬性設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)點擊循環(huán)切換顯示內(nèi)容的方法。分享給大家供大家參考，具體如下：
先來看看運行效果：
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chabaoo.cn 點擊循環(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，因為索引值是從0開始的
flag = 0;
} else {
++flag;
}
}
</script>
</body>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
D3.js支持從外部讀取數(shù)據(jù)進行圖形交互(Loading External Resources)，支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML數(shù)據(jù)結(jié)構(gòu)，下面這篇文章主要給大家介紹了D3.js中CSV表格文件讀取的相關(guān)資料，需要的朋友可以參考下。2017-06-06
這篇文章主要介紹了JS回調(diào)函數(shù)基本定義與用法,結(jié)合實例形式較為詳細(xì)的分析了javascript回調(diào)函數(shù)基本概念、功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-05-05
JavaScript中使用arguments獲得函數(shù)傳參個數(shù)實例
這篇文章主要介紹了JavaScript中使用arguments獲得函數(shù)傳參個數(shù)實例,本文用了多個例子來講解arguments的使用,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript動態(tài)生成帶刪除行功能的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了如何基于JS實現(xiàn)一個發(fā)送驗證碼的計時器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2023-11-11
微信小程序使用picker實現(xiàn)時間和日期選擇框功能【附源碼下載】
這篇文章主要介紹了微信小程序使用picker實現(xiàn)時間和日期選擇框功能,結(jié)合實例形式分析了微信小程序picker組件進行日期與時間選擇的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章介紹了去掉gridPanel表頭全選框的小例子，有需要的朋友可以參考一下2013-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas畫圖，并實現(xiàn)分享功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
異步j(luò)avascript的原理和實現(xiàn)技巧介紹
因為工作的需要，我要在網(wǎng)頁端編寫一段腳本，把數(shù)據(jù)通過網(wǎng)頁批量提交到系統(tǒng)中去。所以我就想到了Greasemonkey插件，于是就開始動手寫，發(fā)現(xiàn)問題解決得很順利2012-11-11
Javascript實現(xiàn)商品秒殺倒計時（時間與服務(wù)器時間同步）
在一些購物商城經(jīng)?？吹接泻芏嗌唐纷雒霘⒒顒?，也就是倒計時，本篇文章給大家介紹Javascript實現(xiàn)商品秒殺倒計時（時間與服務(wù)器時間同步），需要的朋友可以了解下2015-09-09