手机端排版不佳，建议网页浏览，为方便复制，用的代码，就没用截图。

js（jQuery实现---推荐）

<script type="text/javascript">
	$(function(){
		$('#btns input').click(function(){
			//this原生对象
			//给当前对象添加cur样式，并把同级兄弟元素移除cur样式
			$(this).addClass('cur').siblings().removeClass('cur');
			//$(this).index()获取当前按钮所在层级范围的索引值
	$('#contentsdiv').eq($(this).index()).addClass('active').siblings().removeClass('active');
		});
	});
</script>

js（闭包实现）

<script type="text/javascript">
	window.onload = function(){
		var aBtn = document.getElementById('btns').getElementsByTagName('input');
		var aCon = document.getElementById('contents').getElementsByTagName('div');
		for(var i=0;i<aBtn.length;i++){
			//闭包，将一个变量长期驻扎在内存当中，可用于循环中存索引值
			(function(i){
				aBtn[i].onclick = function(){
					for(var j=0;j<aBtn.length;j++){
						aBtn[j].className = '';
						aCon[j].className = '';
					}
				this.className='cur';
				//如果不用闭包，i的值始终是3
				aCon[i].className = 'active';
				}
			})(i)				
		}
	}
</script>

css

<style type="text/css">
	.btns{
		width:500px;
		height: 50px;
	}
	.btns input{
		width: 100px;
		height: 50px;
		background-color: #ddd;
		color: #666;
		border: 0px;
	}
	.btns input.cur{
		background-color: gold;
	}
	.contents div{
		width:500px;
		height: 300px;
		background-color: gold;
		display: none;
		line-height: 300px;
		text-align: center;
		font-size: 50px;
	}
	.contents div.active{
		display: block;
	}
</style>

html

<div class="btns" id="btns">
	<input type="button" value="tab01" class="cur">
	<input type="button" value="tab02">
	<input type="button" value="tab03">
</div>
<div class="contents" id="contents">
	<div class="active">tabo 01内容</div>
	<div>tabo 02内容</div>
	<div>tabo 03内容</div>
</div>