补充：
当所需标签在多处使用时，而你又想取得某一处的标签，就可以用querySelectorAll()来读取某元素的所有子元素
例如：var liArr = document.querySelectorAll('.show-main-tab2 li');这样是取得show-main-taab2下的所有li
要求：将鼠标放在tab栏上某一处，下面就会显示出该内容
<body> <div class="box"> <ul> <li class="current">鞋子</li> <li>袜子</li> <li>帽子</li> <li>裙子</li> <li>裤子</li> </ul> <span class="show">鞋子</span> <span>袜子</span> <span>帽子</span> <span>裙子</span> <span>裤子</span> </div> <script> //需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类) //思路：点亮盒子 利用索引值显示盒子 //获取事件源和相关元素 var liArr = document.getElementsByTagName("li"); var spanArr = document.getElementsByTagName("span"); //绑定事件 for (var i = 0; i < liArr.length; i++) { //书写驱动程序 //绑定索引值 liArr[i].index = i; liArr[i].onmouseover = function(){ //点亮盒子 利用索引值显示盒子 for (var j = 0; j < liArr.length; j++) { liArr[j].className=""; spanArr[j].className=""; } this.className = "current"; spanArr[this.index].className = "show"; } } </script> </body>