javascript實現(xiàn)的多個層切換效果通用函數(shù)實例

更新時間：2015年07月06日 12:29:12 作者：jiedushi

這篇文章主要介紹了javascript實現(xiàn)的多個層切換效果通用函數(shù),涉及javascript針對頁面元素樣式的遍歷與操作技巧,需要的朋友可以參考下

本文實例講述了javascript實現(xiàn)的多個層切換效果通用函數(shù)。分享給大家供大家參考。具體實現(xiàn)方法如下：

function ChangeDiv(tagId,tagName,divId,divName,zDivCount,tagclass,divclass) {
for(i=0;i<=zDivCount;i++) {
document.getElementById(divName+i).style.display="none";
document.getElementById(divName+i).className='';
document.getElementById(tagName+i).className='';
}
document.getElementById(divName+divId).style.display="block";
document.getElementById(tagName+tagId).className=tagclass;
document.getElementById(divName+divId).className=divclass;
}

tagId,tagName為鼠標單擊的控制層的id和名稱 divId,divName為被控制要顯示和隱藏的層的id和名稱 zDivCount為顯示和隱藏的層的個數(shù)-1（如果是5個層則為4）

tagclass,divclass分別為控制層的樣式和被控制層的樣式

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章:

javascript實現(xiàn)時間日期的格式化的方法匯總
這篇文章主要介紹了javascript實現(xiàn)時間日期的格式化的方法匯總，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-08-08
使用Ajax與服務器（JSON）通信實例
本篇文章主要介紹了使用Ajax與服務器（JSON）通信方法，Ajax提供了兩類服務器通信手段：同步通信和異步通信。有需要的可以了解一下。
2016-11-11
JavaScript Object的extend是一個常用的功能
對Object的extend是一個常用的功能。舉一個例子，由于javascript 沒有重載（overload），而且函數(shù)的參數(shù)類型是沒有定義的，所以很多時候我們都傳入一個對象來作為參數(shù)已方便控制。
2009-12-12
跟我學習javascript的最新標準ES6
跟我學習javascript的最新標準ECMAScript 6，ES6（ECMAScript 6）是即將到來的新版本JavaScript語言的標準，代號harmony，感興趣的小伙伴們可以參考一下
2015-11-11
如何防止INPUT按回車自動提交表單FORM
為了防止INPUT按回車form自動提交，可以以下兩種方法：增加一個隱藏的input。為input增加一個按鍵事件來阻止form提交。具體詳情可以參考下本文
2016-12-12
基于JavaScript canvas繪制貝塞爾曲線
這篇文章主要為大家詳細介紹了基于JavaScript canvas繪制貝塞爾曲線的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
微信支付如何實現(xiàn)內置瀏覽器的H5頁面支付
這篇文章主要介紹了微信支付如何實現(xiàn)內置瀏覽器的H5頁面支付的相關資料,需要的朋友可以參考下
2015-09-09
jQuery ajax(復習)—Baidu ajax request分離版
你沒有看錯標題，本文的確是在講Baidu ajax，不過是很久很久以前的版本了,我們先分析一段簡單的ajax代碼，來自早期的百度七巧板項目通過這個來先復習一遍ajax的知識
2013-01-01
JavaScript如何向頁面中添加一個按鈕
這篇文章主要介紹了JavaScript如何向頁面中添加一個按鈕,使用兩種方式向頁面中添加一個按鈕,分別是appendChild()和innerHTML屬性,本文結合示例代碼介紹的非常詳細,需要的朋友可以參考下
2023-10-10
淺談js-FCC算法Friendly Date Ranges(詳解)
下面小編就為大家?guī)硪黄獪\談js-FCC算法Friendly Date Ranges(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04