#tab1 div{ width: 200px; border:1px solid #000; height: 200px; display: none; } input.active{ background: red; } #tab1 div.active{ display: block; }

	<div id='tab1'>
		<input class='active' type="button" value="1" />
		<input type="button" value="2" />
		<input type="button" value="3" />
		<div class='active'>111</div>
		<div>222</div>
		<div>333</div>
	</div>
 

function Tabs (){ this.parent=document.getElementById(“tab1”); this.tabs=this.parent.getElementsByTagName(‘input’); this.content=this.parent.getElementsByTagName(‘div’);

		for(var i=0;i<this.tabs.length;i++){
			this.tabs[i].index=i;
			//這裡的this指向選項卡例項。
			var _this=this;
			this.tabs[i].onclick=function () {
 

// 在事件控制代碼裡，this->指向的是某個input元素

				_this.showTabs(this);
			};
		}		
	}
	
	
	Tabs.prototype.showTabs=function (ele){

// this->指向選項卡物件，因為showTabs函式是選項卡的例項呼叫的 for(var i=0;i<this.tabs.length;i++){ this.tabs[i].className=’’; this.content[i].className=’’; } ele.className=‘active’; this.content[ele.index].className=‘active’; }

	new Tabs();