js选项卡思路

思路:
5个li对应5个div.
当我点击一个 li 的时候,将所有的div隐藏
将所有的li的样式统一
之后当我触发点击事件时
将我电机的这个li的样式改变 改变颜色等
通过**.index**将与li对应的div解除隐藏,就可实现最基础的选项卡效果.

<script>
var item=document.getElementsByClassName("item");
var box=document.getElementsByClassName("box");
	for(i=0;i<item.length;i++){
		item[i].index=i;
		item[i].function(){
			for(j=0;j<box.length;j++){
				box[j].style.display="none";
				item[j].style.background="white";

			}
			this.style.background="pink";
			box[this.index].style.display="block"
		}
	}

</script>

重点:会使用**item[i].index=i;**将此时点击的li的下标纪录下来

		this.style.background="pink";
		box[this.index].style.display="block"

明白"this"代表的是我点击的这个
this.index代表了我点击的这个对应的下标