首頁猿問 js怎么判斷點擊了哪個li標簽啊

js怎么判斷點擊了哪個li標簽啊

JavaScript

_Jason 2015-06-09 23:22:33

當我點擊其中一個li時，實現(xiàn)給當前的li添加一個新class屬性，當再次點擊當前l(fā)i時移除class屬性，實現(xiàn)類似于開關一樣的效果？<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul>

查看完整描述

5 回答

已采納

Y_du

TA貢獻43條經(jīng)驗獲得超5個贊

window.onload=function(){
		var?lis=document.getElementsByTagName('li');
		for?(var?i?=?0;i?<?lis.length;?i++)?{
			lis[i].index?=?i;
			lis[i].onclick=function(){
				for(var?count?=?0;?count?<?this.parentNode.children.length;?count++){
					if(count?!=?this.index)?{
						this.parentNode.children[count].classList.remove("on");
					}?else?{
						if(this.classList?==?0){
							this.classList.add("on")
						}?else?{
							this.classList.remove("on")
						}
					}
				}
			}
		}
	};

反對回復 2015-06-10

_Jason
非常感謝！雖然看不大懂，呵呵

回復 2015-06-10
_Jason
下面貼上我自己寫的~

回復 2015-06-10
qq_慕的地3184537
怎么看不到全的

回復 2019-05-16

_Jason

TA貢獻1條經(jīng)驗獲得超0個贊

window.onload?=?function()?{
	var?openHidden?=?document.getElementsByClassName('open-hidden');
	var?detailsItems?=?document.getElementsByClassName('details-items');

	var?index?=?null;
	for?(var?i?=?0;?i?<?openHidden.length;?i++)?{
		?openHidden[i].index?=?i;
		openHidden[i].onclick?=?function(){
			index?=?this.index;
			toggleClass(index);
		};

	};

	function?toggleClass(index){
		if?(detailsItems[index].className=="details-items?open-box")?{
			openHidden[index].childNodes[0].className?=?"";
			detailsItems[index].className?=?"details-items";
		}?else{
			openHidden[index].childNodes[0].className?=?"open-style";
			detailsItems[index].className?=?"details-items?open-box";
		};
	}

};

反對回復 2015-06-10

Y_du

TA貢獻43條經(jīng)驗獲得超5個贊

11行與13行末尾少了結(jié)束符“;”

反對回復 2015-06-10

Y_du

TA貢獻43條經(jīng)驗獲得超5個贊

window.onload=function(){
		var?lis=document.getElementsByTagName('li');
		for?(var?i?=?0;i?<?lis.length;?i++)?{
			lis[i].index?=?i;
			lis[i].onclick=function(){
				for(var?count?=?0;?count?<?this.parentNode.children.length;?count++){
					if(count?!=?this.index)?{
						this.parentNode.children[count].classList.remove("on");
					}?else?{
						if(this.classList?==?0){
							this.classList.add("on")
						}?else?{
							this.classList.remove("on")
						}e
					}
				}
			}
		}
	};

反對回復 2015-06-10