首页 > 代码库 > 选项卡
选项卡
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{ margin:0px; padding:0px; }#nav{ width:120px; height:392px; float:left; } #nav li{ width:120px; height:98px; border:1px #eee solid; text-align:center; line-height:100px; font-weight:bold; cursor:pointer; font-weight:bold; background:#E7E7E7; list-style-type:none; }#nav .active{ background:#FFF; } #content{ width:600px; height:408px; float:left; position:relative; }#content ul{ position:absolute; width:100%; bottom:7px; text-align:justify; background:#FFF; display:none; opacity:0.6; } #content ul li{ list-style-type:none; display:table-cell; cursor:pointer; border:1px solid #eee; padding:0 20px; line-height:30px; text-align:center; }#content ul.show{ display:table !important; }#content ul li.active{ background:red; opacity:0.8; }#content img{ display:none; } </style><script type="text/javascript">window.onload = function (){ var arrimg = [ [‘img/5-1.jpg‘,‘img/5-2.jpg‘,‘img/5-3.jpg‘], [‘img/5-3.jpg‘,‘img/5-4.jpg‘,‘img/5-5.jpg‘,‘img/5-6.jpg‘], [‘img/5-3.jpg‘,‘img/5-4.jpg‘,‘img/5-5.jpg‘,‘img/5-6.jpg‘,‘img/5-7.jpg‘], [‘img/5-7.jpg‘,‘img/5-8.jpg‘,‘img/5-9.jpg‘,‘img/5-10.jpg‘] ]; var oul = document.getElementById(‘nav‘); var ali = oul.getElementsByTagName(‘li‘); var ocontent = document.getElementById(‘content‘); var aul = ocontent.getElementsByTagName(‘ul‘); var aimg = ocontent.getElementsByTagName(‘img‘); var num = 0; fntab(aul[0]); for( var i = 0;i < ali.length; i++) { ali[i].index = i; ali[i].onclick = function () { for( var i = 0; i < ali.length; i++ ) { num = this.index; ali[i].className = ‘‘; aul[i].className = ‘‘; aimg[i].style.display = ‘none‘; } this.className = ‘active‘; aul[num].className = ‘show‘; aimg[num].style.display = ‘block‘; fntab(aul[num]); }; } function fntab(ul) { var lia = ul.getElementsByTagName(‘li‘); for( var i = 0; i < lia.length; i++ ) { if(lia[i].className) { aimg[num].src = arrimg[num][i]; } lia[i].index = i; lia[i].onclick = function () { for( i = 0; i < lia.length; i++) { lia[i].className = ‘‘; } this.className = ‘active‘; aimg[num].src = arrimg[num][this.index]; } } };};</script></head><body><div id="wrap"> <ul id="nav"> <li class="active">最热团购</li> <li>商城优惠</li> <li>名品推荐</li> <li>缤纷活动</li> </ul> <div id="content"> <img style="display:block;" src="http://www.mamicode.com/img/5-1.jpg"> <ul class="show"> <li class="active">最热团购Tab1</li> <li>最热团购Tab2</li> <li>最热团购Tab3</li> </ul> <img src="http://www.mamicode.com/img/5-3.jpg"> <ul> <li class="active">商城特惠Tab1</li> <li>商城特惠Tab2</li> <li>商城特惠Tab3</li> <li>商城特惠Tab4</li> </ul> <img src="http://www.mamicode.com/img/5-3.jpg"> <ul> <li class="active">名品推荐Tab1</li> <li>名品推荐Tab2</li> <li>名品推荐Tab3</li> <li>名品推荐Tab4</li> <li>名品推荐Tab5</li> </ul> <img src="http://www.mamicode.com/img/5-7.jpg"> <ul> <li class="active">缤纷活动Tab1</li> <li>缤纷活动Tab2</li> <li>缤纷活动Tab3</li> <li>缤纷活动Tab4</li> </ul> </div></div></body></html>
选项卡
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。