Document<br>nav {<br> height: 50px;<br>}<br>nav span {<br> margin: 0 5px;<br>}<br>.show {<br> color: red;<br>}<br> 手机: 锤子T1 锤子T2 坚果U1 锤子M1 坚果Pro 价格: 3200 2600 899 2799 2299 屏幕: 399 600 800 1200 <br>(function(){<br> var nav = document.querySelector('nav');<br> var li = document.querySelectorAll('li');<br> var ids = [];<br> for(var i = 0; i <li.length; i++){<br/> setClick(li[i],i);<br/> }<br/> function 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; i < ids.length; i++){<br/> if(ids[i]){<br/> nav.appendChild(ids[i]);<br/> }<br/> }<br/> };<br/> }<br/> }<br/>})(); <br/>
