tab选项卡（学习某编程网站的，仅作记录和学习，非原创）

点击切换

<div id="tab" class="tab">
			<div id="tabHd" class="tab-hd">
				<ul>
					<li class="select">
						<a href="javascript: void(0);">tab1</a>
					</li>
					<li>
						<a href="javascript: void(0);">tab2</a>
					</li>
					<li>
						<a href="javascript: void(0);">tab3</a>
					</li>
					<li>
						<a href="javascript: void(0);">tab4</a>
					</li>
					<li>
						<a href="javascript: void(0);">tab5</a>
					</li>
				</ul>
			</div>
			<div id="tabBd" class="tab-bd">
				<div class="tab-item select">
					tab-item1
				</div>
				<div class="tab-item">
					tab-item2
				</div>
				<div class="tab-item">
					tab-item3
				</div>
				<div class="tab-item">
					tab-item4
				</div>
				<div class="tab-item">
					tab-item5
				</div>
			</div>
		</div>

　　

.tab {
	width: 298px;
	height: 98px;
	margin: 10px;
	border: 1px solid #eee;
	overflow: hidden;
}

.tab-hd {
	height: 27px;
	position: relative;
	color: #F7F7F7;
}

.tab-hd ul {
	position: absolute;
	width: 301px;
	left: -1px;
}

.tab-hd ul li {
	float: left;
	width: 58px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	overflow: hidden;
	padding: 0 1px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

.tab-hd li.select {
	background-color: #fff;
	border-bottom: #fff;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	padding: 0;
}

.tab-hd ul li a {
	text-decoration: none;
	color: #000;
}

.tab-hd ul li a:hover {
	color: #f90;
}

.tab-item {
	display: none;
	text-align: center;
}

.tab-item.select {
	display: block;
}

　　

function $(id) {
	return typeof id === 'string' ? document.getElementById(id) : id;
}

window.onload = function() {
	var index = 0;
	var timer = null;

	// 获取鼠标划过或者点击的标签和要切换的内容的元素
	var tabs = $('tabHd').getElementsByTagName('li'),
		tabItems = $('tabBd').getElementsByTagName('div');

	if (tabs.length != tabItems.length) {
		return;
	}

	// 遍历tabs下面的li
	for (var i = 0; i < tabs.length; i++) {
		tabs[i].id = i;
		tabs[i].onclick = function() {
			var that = this;
			// 如果存在准备执行的定时器，立即清除
			if (timer) {
				clearTimeout(timer);
				timer = null;
			}

			timer = setTimeout(function() {
				// 清除所有li的class
				for (var j = 0; j < tabs.length; j++) {
					tabs[j].className = '';
					tabItems[j].style.display = 'none';
				}
				// 设置当前为高亮
				tabs[that.id].className = 'select';
				tabItems[that.id].style.display = 'block';
			}, 500);
		}
	}
}

　　自动切换结构和css与点击一样，不再重复

window.onload = tab;
function tab(){
    var index = 0;
    var timer = null;
    
    var tabs = $('tabHd').getElementsByTagName('li'),
        tabItems = $('tabBd').getElementsByTagName('div');
        
        
    var tabLen = tabs.length;
    
    // 遍历每一个页签且给他们绑定事件
    for (var i = 0; i < tabLen; i++) {
        tabs[i].id = i;
        tabs[i].onmouseover = function(){
            // 鼠标经过，停止自动切换
            clearInterval(timer);
            changeOption(this.id);
        }
        
        tabs[i].onmouseout = function(){
            timer = setInterval(autoPlay,2000);
        }
    }
    
    // 如果存在timer 则清空掉
    if(timer) {
        clearInterval(timer);
        timer = null;
    }
    
    // 添加定时器，改变当前索引
    timer = setInterval(autoPlay,2000);
    
    function autoPlay(){
        index++;
        if(index >= tabLen ) {
            index = 0;
            console.log(index);
        }
        changeOption(index);
    }
    
    function changeOption(curIndex){
        for (var j = 0; j < tabLen; j++) {
            tabs[j].className = '';
            tabItems[j].style.display = 'none';
        }
        tabs[curIndex].className = 'select';
        tabItems[curIndex].style.display = 'block';
        
        // 接收滑过时候的索引
        index = curIndex;
    }
}