原生js实现tab切换效果实例

这里主要讲利用原生js实现tab切换效果。

原理：当鼠标点击当前元素，会通过index的下标来选中与其对应的盒子。通过for循环来遍历，缺点：耗性能，当然这里大家可以忽略不计。

示例图：

html代码：

<div id="box">
	<button style="background-color: yellow;">1</button>
	<button>2</button>
	<button>3</button>
	<button>4</button>
</div>
<div id="tab">
	<div class="show">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

css代码：

#box button{
	background-color: #ccc;
	width:80px;
	height: 30px;
}
#tab div{
	font-size: 60px;
	color: #fff;
	width: 300px;
	height: 200px;
	background-color: blue;
	float: left;
	display: none;
}
#tab .show{
	display: block;
}

js代码：

<script type="text/javascript">
	var buttonArr = document.getElementById("box").getElementsByTagName("button");
	var tabBox= document.getElementById("tab").getElementsByTagName("div");
	for (var i = 0;i<buttonArr.length;i++){
		buttonArr[i].index=i;//标记当前下标
		buttonArr[i].onclick=function(){
			for(var k = 0; k < buttonArr.length; k++) {
				buttonArr[k].style.backgroundColor = "";
				this.style.backgroundColor = "yellow";//给当前点击的元素添加样式
				tabBox[k].style.display = "none";//隐藏盒子
				//当前点击元素的下标对应的盒子显示
				tabBox[this.index].style.display = "block";
			}
		}
	};
</script>

我这个demo做的比较简单，大家可以根据自己的需求去修改。