以前我在網(wǎng)上總會(huì)看類似這種的JS效果：

點(diǎn)擊編輯時(shí): (不好意思哈，圖在文章最后面)
這種列表與編輯都在同一頁(yè)的效果，確實(shí)很好，能夠給用戶帶來(lái)意想不到的美好體驗(yàn)。可是它是怎么實(shí)現(xiàn)的呢？
其實(shí)實(shí)現(xiàn)這種效果有很多方法，當(dāng)然如果你的JS不好，可以用JQuery的組件，但是我想要是自己能寫(xiě)出來(lái)總是好的。因此我抽了點(diǎn)時(shí)間來(lái)實(shí)現(xiàn)它。當(dāng)我實(shí)現(xiàn)后，發(fā)現(xiàn)要實(shí)現(xiàn)這種效果是很簡(jiǎn)單的，幾行JS代碼就搞定了，關(guān)鍵就是一個(gè)思路問(wèn)題，下面我會(huì)具體的寫(xiě)是怎么實(shí)現(xiàn)的。
總體思路：給一個(gè)ID，以顯示與隱藏來(lái)實(shí)現(xiàn)這種效果。
首先，實(shí)現(xiàn)這個(gè)關(guān)鍵橋段就是“ID”，因?yàn)槟阋@示與隱藏某個(gè)，唯一能區(qū)別它們的就是它們的ID號(hào)了，當(dāng)然我們還是以循環(huán)輸出的形式“”。那么我們?cè)贘S代碼中就可以以它們的ID號(hào)來(lái)識(shí)別它們了。
但關(guān)鍵問(wèn)題又來(lái)了，我們?cè)趺慈∵@個(gè)ID值呢？可能有朋友與我一樣想到了隱藏域，剛開(kāi)始時(shí)我也這么想的，可是那是不行的，因?yàn)槟阌肑S取隱藏域中的值時(shí)，那它的ID是定死了的，這樣你只能每次都取到第一個(gè)的ID號(hào)，其它就取不到了。那又怎么辦呢？？呵呵。別急。。人總是有辦法的。
我們還有“this”它呀，這個(gè)關(guān)鍵字確實(shí)是好東東，有了它“就天不怕，天不怕了”...
這樣：我們?cè)谟|發(fā)JS取值ID號(hào)的地方寫(xiě)上“/m"> ”。。這樣來(lái)我們就輕容取得了與類同（注意：為什么說(shuō)類同我后面要說(shuō)）的ID號(hào)了，可能細(xì)心的朋友已看到了我的代碼后有一個(gè)“/m”。。寫(xiě)這個(gè)的原因在于要與ID分開(kāi)來(lái)，不然取不到值（ID是唯一性的）。
這樣一來(lái)，如果的ID號(hào)為“1223”，那么我“onclick”事件取上來(lái)的值就是“1223/m”，我們?cè)谟肑S的分割字符串的方法來(lái)得到與相同的ID號(hào)。“ var vaarray=va.split('/');var id=vaarray[0];”
。好了。既然ID號(hào)都得到還有什么不能做的呢。。呵呵呵。下面我們就讓它顯示出來(lái)。“document.getElementById(id).style.display="block";”
....OK..OVER...
下面是部分關(guān)鍵代碼：
JS部分如下：
代碼如下:
//顯示
function display(va){
var vaarray=va.split('/');
var id=vaarray[0];
document.getElementById(id).style.display="block";
var parID=id+'p';
document.getElementById(parID).style.display="none";//這里是相應(yīng)某個(gè)的隱藏
}

HTML部分如下：
代碼如下:

修改





/m">
顯示



另說(shuō)明：1以上代碼可能我在發(fā)表時(shí)有誤，如不能實(shí)現(xiàn)，可以聯(lián)系我。
2以上只是我的學(xué)習(xí)記錄，可能不專業(yè)，如有錯(cuò)誤的地方，很歡迎你指出來(lái)，我一定加以改進(jìn)。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com