JavaScript實(shí)現(xiàn)選項(xiàng)卡效果的分析及步驟

var divs = document.getElementById("tab").getElementsByTagName("div");
//console.log(divs)
 for(let i=0; i<lis.length; i++){
 lis[i].index = i;
 lis[i].onclick = function() {
 	for( let n=0; n<lis.length; n++){
 	lis[n].className = "";
 	divs[n].className = "hide";
 	}
 	this.className = "on";
 	divs[this.index].className = "";
 	}
 }	

window.onload = function() {
 var uls = document.getElementById('tit');
 var lis = uls.getElementsByTagName('li');
 var divs = document.getElementById('tab').getElementsByTagName('div');
 // console.log(lis)
 console.log(divs)
 uls.onclick = function(ec) {
 for(let i=0; i<lis.length; i++){
 lis[i].className = ""; //遍歷每個(gè)li設(shè)置類(lèi)名
 divs[i].className = "hide"; 
 }
 var ev = ev || window.event;
 var target = ev.target || ev.srcElement;
 if(target.nodeName.toLowerCase() == 'li'){
 target.className = "on";
 //自己在每個(gè)li中定義了一個(gè)屬性 data-index
 divs[target.getAttribute("data-index")].className = ""; 
 console.log(target);
 }
 } 
 }

<li class="on" data-index="0">房產(chǎn)</li>
<li data-index="1">家居</li>	
<li data-index="2">二手房</li>

divs[target.getAttribute("data-index")].className = "";