纯javascript实现tab选项卡效果代码

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

*{margin:0;padding:0}
body{margin:0 auto;}
ul{list-style-type:none}
.newTab{margin:0 auto}
	.newTit{width:100%;float:left;line-color:#444444;font-size:16px;}
		.newTit li{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{float:left;border:1px #e6e6e6 solid;border-top:none}	
		.newConX{width:100%;float:left;display:none}
			.newConX p{width:100%;float:left;line-font-size:12px}
				.newConX p label{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}</style></p>
<div class="newTab">
<ul id="newTit" class="newTit">
    <li class="active">买家中心</li>
    <li>卖家中心</li>
</ul>
<div id="newCon" class="newCon">
<div style="display: block" class="newConX">
<p><label><span>待处理订单(</span><a class="tabOrg" href="">10</a><span>)</span></label> <label><span>待评价交易(</span><a class="tabOrg" href="">10</a><span>)</span></label> <label><span>待确定订单(</span><a class="tabOrg" href="">10</a><span>)</span></label></p>
<p class="newConXp"><span>本月购买额度</span><a class="tabOrg" href="">17826.35</a><span>元(返20元)</span></p>
<p class="newConXp"><span>本年购买额度</span><a class="tabOrg" href="">17826.35</a><span>元(返100元)</span></p>
<p class="newConXp"><span>您的购买金额排第1名,奖励100元!</span></p>
</div>
<div class="newConX">
<p><label><span>待处理订单(</span><a class="tabOrg" href="">10</a><span>)</span></label> <label><span>待审批商品(</span><a class="tabOrg" href="">10</a><span>)</span></label> <label><span>未更新商品(</span><a class="tabOrg" href="">10</a><span>)</span></label></p>
<p class="newConXp"><span>本月购买额度</span><a class="tabOrg" href="">17826.35</a><span>元(返20元)</span></p>
<p class="newConXp"><span>本年购买额度</span><a class="tabOrg" href="">17826.35</a><span>元(返100元)</span></p>
<p class="newConXp"><span>您的购买金额排第1名,奖励100元!</span></p>
</div>
</div>
</div>
<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></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

纯javascript实现tab选项卡效果代码

相关文章

精彩推荐