接下来是内容块的设置，如何设置当点击标题时只显示对应的内容块呢？他们有什么共同之处可以使得内容和标题绑在一起呢？假设给他们排序的化，标题一对应内容一，标题二对应内容二，所以这里使用了index，
index() 方法返回指定元素相对于其他指定元素的 index 位置。
这个位置我们也是可以设置的。在给每个li添加事件的时候用到了for里面的参数i在这里表示0，1，2可以表示标题块之间的相对位置（lis[i].index = i)，这也正是盒子块之间的相对位置。我们可以通过divs[this.index]来获取被点击标题对应的盒子。
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 = ""; } }
到这里，题目要求的所有效果都实现了，回头看看，感觉不是很难，但是当时在刚看到题目的时候还是很懵的，不知道如何获取被点击的标题（想到了冒泡和捕获，后面还需要对这个进行学习）,不知道如何设置css....，自己还需要更多的学习。
——————————分割线—————
很多大佬都指导我说之前的方法耗内存：用for循环给每个li都添加一个点击事件。下面，我用事件委托来更新一下这个办法：
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 = ""; //遍历每个li设置类名 divs[i].className = "hide"; } var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){ target.className = "on"; //自己在每个li中定义了一个属性 data-index divs[target.getAttribute("data-index")].className = ""; console.log(target); } } }
我在html中给每个li自定了属性data-index：
<li data-index="0">房产</li> <li data-index="1">家居</li> <li data-index="2">二手房</li>
再在js中用getAttribute获取所点击的li的属性值
divs[target.getAttribute("data-index")].className = "";