純javascript實現tab選項卡效果代碼

來源:互聯網
上載者:User
提示:您可以先修改部分代碼再運行

<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 class="newConX"><p><label><span>待處理訂單(</span>10<span>)</span></label> <label><span>待評價交易(</span>10<span>)</span></label> <label><span>待確定訂單(</span>10<span>)</span></label></p><p class="newConXp"><span>本月購買額度</span>17826.35<span>元(返20元)</span></p><p class="newConXp"><span>本年購買額度</span>17826.35<span>元(返100元)</span></p><p class="newConXp"><span>您的購買金額排第1名,獎勵100元!</span></p></div><div class="newConX"><p><label><span>待處理訂單(</span>10<span>)</span></label> <label><span>待審批商品(</span>10<span>)</span></label> <label><span>未更新商品(</span>10<span>)</span></label></p><p class="newConXp"><span>本月購買額度</span>17826.35<span>元(返20元)</span></p><p class="newConXp"><span>本年購買額度</span>17826.35<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>
提示:您可以先修改部分代碼再運行

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.