• javascript 实现tab选项卡

  • 发布日期:2013-08-15 21:07:19   
  • 有段时间没用原生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>

     

热门搜索: tab选项卡  
  • 相关推荐
    • 点击排行