js實現選項卡

html

<div class="container">
	<div class="tab">
		<ul class="tab-control">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<div class="tab-content" id="tab_content">
			<div class="tab-content-item active">1</div>
			<div class="tab-content-item">2</div>
			<div class="tab-content-item">3</div>
			<div class="tab-content-item">4</div>
			<div class="tab-content-item">5</div>
		</div>
	</div>
</div>

css

*{
    margin:0;
    padding:0;
	list-style:none;
}
.container{
    margin:50px auto;
    width:1120px;
}
.tab{
    margin:0 auto;
    border:1px solid #aaa;
    width:1004px;
}
.tab-control{
    overflow:hidden;
}
.tab-control li{
    border-top:3px solid #aaa;
    width:200px;
    float:left;
    background-color:#ccc;
    color:#000;
    font:bold 22px/40px "宋體";
    text-align:center;
    cursor:pointer;
}
.tab-control li.active{
    border-top:3px solid red;
    border-left:1px solid #aaa;
    background-color:#fff;
    color:red;
}
.tab-content{
    width:1000px;
}
.tab-content .tab-content-item {
    display:none;
	height: 200px;
	line-height: 200px;
	text-align: center;
}
.tab-content .tab-content-item.active {
    display:block;
}

js

方法一、遍歷所有需要添加的事件的節點，給一個節點都添加事件

var lis = document.querySelectorAll('.tab-control li');
var divs = document.querySelectorAll('.tab-content-item');
var i = 0;
for (; i < lis.length; i++) {
	lis[i].index = i;
	lis[i].onmouseenter = function() {
		var j = 0;
		for (; j < lis.length; j++) {
			lis[j].className = '';
			divs[j].className = 'tab-content-item';
		}
		this.className = 'active';
		var num = this.index;
		divs[num].className = 'tab-content-item active';
	}
}

方法二、事件委託（推薦）

var ul = document.querySelector('.tab-control');
var lis = document.querySelectorAll('.tab-control li');
var divs = document.querySelectorAll('.tab-content > div');
var num = 0;
ul.onmouseover = function (e) {//onmouseenter不支持冒泡
	// console.log(e.target.nodeName)
	if (e.target.nodeName === 'LI') {
		// console.log(e.target)
		var i = 0;
		for (; i < lis.length; i++) {
			var index;
			lis[i].className = '';
			divs[i].className = 'tab-content-item';
			if (lis[i] === e.target) {
				index = i;
			}
		}
	}
	// console.log(index)
	lis[index].className = 'active';
	divs[index].className = 'tab-content-item active';
	mark = index;
}
//自動輪播
function autoPlay() {
	var timer = setInterval(function () {
		num ++;
		if(num === lis.length){
			num = 0;
		}
		for(var j = 0; j<lis.length;j++){
			lis[j].className = '';
			divs[j].className = 'tab-content-item';
		}
		lis[num].className = 'active';
		divs[num].className = 'tab-content-item active';
	}, 2000)
}
autoPlay();

最後，關於事件委託，看了一些資料，寫成自己可以理解的話
事件委託，又叫事件代理，原理就是利用冒泡，只指定一個事件處理程序，用來管理某一類型的所有事件。
例子：前臺代收快遞的妹子
使用事假委託，不用給每個結點都添加事件，節省內存，性能更好。