前端html+css+js开发：简单选项卡切换-自动（附源码）

效果图：

css代码：

			* {
				margin: 0;
				padding: 0;
				font-size: 12px;
				font-family: "微软雅黑";
				color: #3c3c3c;
				text-decoration: none;
				list-style-type:none;
			}
			#tab_list {
				width: 275px;
				height: 190px;
				margin: 30px auto;
			}
			#list {
				height: 32px;
				border-bottom: 2px solid aqua;
			}
			#list li {
				display: inline-block;
				width: 60px;
				border-bottom: 1px solid aquamarine;
			}
			#list .active {
				border-top: 2px solid #0000FF;
				border-bottom: 2px solid aquamarine;
			}
			#tab_list div {
				border: 1px solid #FF5000;
				border-top: none;
			}
			#tab_list div li {
				height: 30px;
				line-height: 30px;
				text-indent: 8px;
			}
			#tab_list .show {
				display: block;
			}
			#tab_list .hidden {
				display: none;
			}

html代码：

		<div id="tab_list">
			<ul id="list">
				<li class="active">选项一</li>
				<li>选项二</li>
				<li>选项三</li>
			</ul>
			<div class="show">
				<ul>
					<li><a href="javascript:;">选项一内容-1</a></li>
					<li><a href="javascript:;">选项一内容-2</a></li>
					<li><a href="javascript:;">选项一内容-3</a></li>
					<li><a href="javascript:;">选项一内容-4</a></li>
				</ul>
			</div>
			<div class="hidden">
				<ul>
					<li><a href="javascript:;">选项二内容-1</a></li>
					<li><a href="javascript:;">选项二内容-2</a></li>
					<li><a href="javascript:;">选项二内容-3</a></li>
					<li><a href="javascript:;">选项二内容-4</a></li>
				</ul>
			</div>
			<div class="hidden">
				<ul>
					<li><a href="javascript:;">选项三内容-1</a></li>
					<li><a href="javascript:;">选项三内容-2</a></li>
					<li><a href="javascript:;">选项三内容-3</a></li>
					<li><a href="javascript:;">选项三内容-4</a></li>
				</ul>
			</div>
		</div>

js代码：

		window.onload = function() {
			var tab = document.getElementById("tab_list");
			var list = document.getElementById("list").getElementsByTagName("li");
			var div = document.getElementById("tab_list").getElementsByTagName("div");
			var timer = null;
			var index = 0;
			for (var i=0; i<list.length; i++) {
				list[i].num = i;
				list[i].onmouseover = function () {
					Change(this.num);
				}
			}
			
			function Change(curIndex) {
				for (var i=0; i<list.length; i++) {
					list[i].className = "";
					div[i].className = "hidden";
				}
				list[curIndex].className = "active";
				div[curIndex].className = "show";
				index = curIndex;
			}
			
			//自动播放
			function autoPlay() {
				timer = setInterval(function () {
					index++;
					if (index > list.length-1) {
						index = 0;
					}
					Change(index);
				},2000);
			}
			
			autoPlay();
			tab.onmouseover = function () {
				clearInterval(timer);
			}
			tab.onmouseout = function () {
				autoPlay();
			}
		}