【js实例】js实现点击标题标签切换显示对应内容

标题标签层点击后切换显示对应的内容层，例如有一个简单的滑动标签：

记得自己要先写ul,li,div的样式哦，我这里就省略样式了

<div id="tab">
	<ul>
		<li class="active">电影</li>
		<li>综艺</li>
		<li>动漫</li>
	</ul>
	<div class="active">钢铁侠</div>
	<div>快乐大本营</div>
	<div>火影忍者</div>
</div>

<script>
	var box = document.getElementById("tab"); //获取滑动标签最外层元素
	var olis = box.getElementsByTagName("li"); //获取标签元素
	var odivs = box.getElementsByTagName("div"); //获取切换内容层元素
	//构建循环，获取每一个标签
	for(var i=0; i<olis.length; i++) {
	    //给每一个标签设置一个序号属性
	    olis[i].index = i;
	    //给每一个标签绑定点击事件
	    olis[i].onclick = function () {
			//清除所有标签样式
			for(var j=0; j<olis.length; j++) {
			    olis[j].className="";
			    odivs[j].className="";
			}
			//给当前点击的标签加上样式
			this.className="active";
			//给当前点击的标签序号对应的内容层加上样式
			odivs[this.index].className="active";
           }
	}
</script>