<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0px; padding:0px; } #nav{ 120px; height:392px; float:left; } #nav li{ 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{ 600px; height:408px; float:left; position:relative; } #content ul{ position:absolute; 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="img/5-1.jpg"> <ul class="show"> <li class="active">最热团购Tab1</li> <li>最热团购Tab2</li> <li>最热团购Tab3</li> </ul> <img src="img/5-3.jpg"> <ul> <li class="active">商城特惠Tab1</li> <li>商城特惠Tab2</li> <li>商城特惠Tab3</li> <li>商城特惠Tab4</li> </ul> <img src="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="img/5-7.jpg"> <ul> <li class="active">缤纷活动Tab1</li> <li>缤纷活动Tab2</li> <li>缤纷活动Tab3</li> <li>缤纷活动Tab4</li> </ul> </div> </div> </body> </html>