欢迎来到酷云建站平台,全网营销云系统加盟中心!

海量企业网站模板 · 任您选择

美出特色,精出品质,一切为了企业更好的营销

隐藏侧栏
Beta
转载

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

       Tabs     2016-02-16     eycms     124     0    

<p><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}</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>元</span></p>

<p class="newConXp"><span>本年购买</span><a class="tabOrg" href="">17826.35</a><span>元</span></p>

<p class="newConXp"><span>您的购买!</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>


--结束END--

本文链接: http://www.83703228.cn/resources/tabs/1124.html (转载时请注明来源链接)

 
本文标签: 全部

下班PC阅读不方便?

手机也可以随时学习开发

微信关注公众号“酷云”
"酷云平台前端开发教学"
每日干货技术分享
 

×

成为 酷云平台 代理商!

关注

微信
关注

微信扫一扫
获取最新优惠信息

酷云平台公众号

客服

联系
客服

很高兴为您服务
尊敬的用户,欢迎您咨询,我们为新用户准备了优惠好礼。 咨询客服

联系客服:

在线QQ: 3206174

客服电话: 0516-83703228

售前咨询 售后服务
在线交谈 智能小云

工作时间:

周一至周五: 09:00 - 17:00

WAP

手机
访问

移动端访问
手机上也能选模板

酷云平台手机端