文件nav { 高度：50px;}nav跨度{ 邊距： 0 5px;}.show { 顏色：紅色;} < nav> 手機： 鐵鎚T1 鐵鎚T2 ;VPNU1 錘子M1 VPNPro 價格： 3200 2600 899 2299 螢幕: 600 800 <lt ;a href="javascript:;">1200 < /ul><br/>(function (){<br/> var nav = document.querySelector('nav');<br/> var li = document.querySelectorAll ('li');<br/> var ids = [];<br/> for(var i =## for(var i = 0; i <li.長度； i++){<br/> setClick(li[i],i);<br/> }<br/> 函數 setClick(parent,index){<br/> var option = parent.getElementsByTagName("a");<br/> for (var i = 0; i < option.length; i++){<br/> /*<br/> 建立一個資料庫<br/> */<br/> option[i].onclick = function(){<br/> for ( var i = 0; i < option.length; i++){<br/> option[i].className = "";<br/> }<br/> this.className = "show";<br/> var span = ids[ index];<br/> if(ids[index]){<br/> span.children[0].innerHTML = this.innerHTML;<br/> return;<br/> }<br/> span = document.createElement( "span ");<br/> var a = document.createElement("a");<br/> var Strong = document.createElement("strong");<br/> a.innerHTML = "x";<br/> a .href ="javascript:;";<br/> a.onclick = function(){<br/> nav.removeChild(span);<br/> ids[index]="";<br/> /*<br/> 刪除元素清除陣列物件<br/> */<br/> for(var i = 0; i < option.length; i++){<br/> option[i].className = "";<br/> }<br/># }<br/> strong.innerHTML = this.innerHTML;<br/> span.appendChild(strong);<br/> span.appendChild(a);<br/> ids[index] = span;<br/> /*<br/>元素生成之後，先存入堆疊的對應位置<br/> */</p><p> /*<br/> 依照堆疊的順序重新加入重複元素<br/> */<br/> for(var i = 0;我< ids.長度； i++){<br/> if(ids[i]){<br/> nav.appendChild(ids[i]);<br/> }<br/> }<br/> };<br/> }<br/> }<br/>})(); <br/>
web前端
js教程
DOM方法的綜合運用介紹
