javascript 实现tab选项卡

有段时间没用原生javascript写东西,今天项目页面中需要tab选项卡的,果断使用之.确实代码比之前的jquery长了点,只要能处理问题就行.
HTML结构代码

<div class="newTab">
	<ul class="newTit" id="newTit">
		<li class="active">买家中心</li>
		<li>卖家中心</li>
	</ul>
	<div class="newCon" id="newCon">
		<div class="newConX" style="display:block">
			<p>
				<label><span>待处理订单(</span><a href="" class="tabOrg">10</a><span>)</span></label>
				<label><span>待评价交易(</span><a href="" class="tabOrg">10</a><span>)</span></label>
				<label><span>待确定订单(</span><a href="" class="tabOrg">10</a><span>)</span></label>
			</p>
			<p class="newConXp"><span>本月购买额度</span><a href="" class="tabOrg">17826.35</a><span>元(返20元)</span></p>
			<p class="newConXp"><span>本年购买额度</span><a href="" class="tabOrg">17826.35</a><span>元(返100元)</span></p>
			<p class="newConXp"><span>您的购买金额排第1名,奖励100元!</span></p>
		</div>
		<div class="newConX">
			<p>
				<label><span>待处理订单(</span><a href="" class="tabOrg">10</a><span>)</span></label>
				<label><span>待审批商品(</span><a href="" class="tabOrg">10</a><span>)</span></label>
				<label><span>未更新商品(</span><a href="" class="tabOrg">10</a><span>)</span></label>
			</p>
			<p class="newConXp"><span>本月购买额度</span><a href="" class="tabOrg">17826.35</a><span>元(返20元)</span></p>
			<p class="newConXp"><span>本年购买额度</span><a href="" class="tabOrg">17826.35</a><span>元(返100元)</span></p>
			<p class="newConXp"><span>您的购买金额排第1名,奖励100元!</span></p>
		</div>
	</div>	

css代码

<style type="text/css">
*{margin:0;padding:0}
body{margin:0 auto;}
ul{list-style-type:none}
.newTab{width:230px;margin:0 auto}
	.newTit{width:100%;height:40px;float:left;line-height:40px;color:#444444;font-size:16px;}
		.newTit li{width:115px;height:40px;float:left;background:url(images/sy_04.jpg) no-repeat;text-align:center;cursor:pointer}
		.newTit li.active{background:url(images/sy_03.jpg) no-repeat;color:#ff6701}
	.newCon{width:228px;height:140px;float:left;border:1px #e6e6e6 solid;border-top:none}	
		.newConX{width:100%;float:left;display:none}
			.newConX p{width:100%;float:left;line-height:28px;font-size:12px}
				.newConX p label{width:100px;float:left;margin-left:10px;display:inline;color:#5c5c5c}
					.newConX p label span{float:left;}
					.newConX p label a{float:left}
				.newConXp{text-indent:0.95em}
 
				.tabOrg{color:#ff6701}
				a.tabOrg{color:#ff6701;text-decoration:none}
				a:hover.tabOrg{color:#ff6701;text-decoration:none}

javascript代码

<script type="text/javascript">
window.onload=function(){
	var tit=document.getElementById('newTit').getElementsByTagName('li');
	var con=document.getElementById('newCon').getElementsByTagName('div');
	var i=0;
	for(i=0;i<tit.length;i++)
	{
		tit[i].index=i;
		tit[i].onclick=function()
		{
			for(i=0;i<tit.length;i++)
			{
				tit[i].className='';
				con[i].style.display='none';
			}
 
			this.className='active';
			con[this.index].style.display='block';
		}
	}
}
</script>