1. 面对对象实战之选项卡

    结合了原型函数及构造函数。

    	<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>
    	<style>
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		ol,li,ul {
    			list-style: none;
    		}
    		.tab {
    			width: 600px;
    			height: auto;
    			margin:  12px auto;
    			border: 1px solid #ccc;
    		}
    		.list {
    			width: 100%;
    			height: 40px;
    			background: #989696;
    			line-height: 40px;
    		}
    		.lists {
    			float: left;
    		}
    		.lists a {
    			padding: 0 84px;
    			color: #fff;
    		}
    		.list .active {
    			background: #fff;
    		}
    		.list .active a{
    			color: #000;
    		}
    		.tab .tab-c .active{
    			display: block;
    		}
    		.tab-c .tab-c-s {
    			display: none;
    		}
    	</style>
    </head>
    <body>
    	<div class="tab">
    		<ol class="list">
    			<li class="lists active">
    				<a href="javascript:;">军事
    			</li>
    			<li class="lists">
    				<a href="javascript:;">娱乐
    			</li>
    			<li class="lists">
    				<a href="javascript:;">新闻
    			</li>
    		</ol>
    		<div class="tab-c">
    			<ul class="tab-c-s active">
    				<li class="tab-lists">我是军事我是军事</li>
    				<li class="tab-lists">我是军事我是军事</li>
    				<li class="tab-lists">我是军事我是军事</li>
    				<li class="tab-lists">我是军事我是军事</li>
    				<li class="tab-lists">我是军事我是军事</li>
    				<li class="tab-lists">我是军事我是军事</li>
    				<li class="tab-lists">我是军事我是军事</li>
    				<li class="tab-lists">我是军事我是军事</li>
    			</ul>
    			<ul class="tab-c-s">
    				<li class="tab-lists">我是娱乐我是娱乐我是娱乐我是娱乐</li>
    				<li class="tab-lists">我是娱乐我是娱乐我是娱乐我是娱乐</li>
    				<li class="tab-lists">我是娱乐我是娱乐我是娱乐我是娱乐</li>
    				<li class="tab-lists">我是娱乐我是娱乐我是娱乐我是娱乐</li>
    				<li class="tab-lists">我是娱乐我是娱乐我是娱乐我是娱乐</li>
    			</ul>
    			<ul class="tab-c-s">
    				<li class="tab-lists">我是新闻我是新闻我是新闻我是新闻我是新闻</li>
    				<li class="tab-lists">我是新闻我是新闻</li>
    				<li class="tab-lists">我是新闻我是新闻</li>
    				<li class="tab-lists">我是新闻</li>
    				<li class="tab-lists">我是新闻我是新闻我是新闻我是新闻</li>
    				<li class="tab-lists">我是新闻我是新闻我是新闻我是新闻我是新闻</li>
    				<li class="tab-lists">我是新闻我是新闻</li>
    				<li class="tab-lists">我是新闻我是新闻</li>
    				<li class="tab-lists">我是新闻</li>
    				<li class="tab-lists">我是新闻我是新闻我是新闻我是新闻</li>
    			</ul>
    		</div>
    	</div>
    	<script>
    		var tabObj = document.querySelector('.tab');
    		/*
    		var lists = tab.querySelectorAll('.lists');
    		var tabcs = tab.querySelectorAll('.tab-c-s');
    		var listsLen = lists.length;
    		for(var i=0;i<listsLen;i++){
    			lists[i].index = i;
    			lists[i].onclick = function () {
    				for(var j=0;j<listsLen;j++){
    					lists[j].className = 'lists';
    					tabcs[j].className = 'tab-c-s';
    				}
    				this.className = 'lists active';
    				tabcs[this.index].className = 'tab-c-s active';
    			}
    		}*/
    		;(function (window) {
    			function Tab (obj) {
    				this.lists = obj.querySelectorAll('.lists');
    				this.tabcs = obj.querySelectorAll('.tab-c-s');
    				this.len = this.lists.length;
    			}
    			Tab.prototype = {
    				init:function () {
    					var _this = this;
    					for(var i=0;i<this.len;i++){
    						this.lists[i].index = i;
    						this.lists[i].onclick = function () {
    							_this.run(this);
    						}
    					}
    				},
    				run : function ($this) {
    					for(var j=0;j<this.len;j++){
    						this.lists[j].className = 'lists';
    						this.tabcs[j].className = 'tab-c-s';
    					}
    					$this.className = 'lists active';
    					this.tabcs[$this.index].className = 'tab-c-s active';
    				}
    			}
    			new Tab(tabObj).init();
    		})(window);
    	</script>
    </body>
    </html>