<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡套选项卡</title> <style type="text/css"> body,ul{margin:0; padding:0;} .clearfix{zoom:1;} .clearfix:after{display:block; content:""; clear:both; height: 0; overflow: hidden;} li{list-style:none;} a{text-decoration:none;} img{border:none; vertical-align:top;} #wrap{width:958px; margin:100px auto; background:#e6e6e6; border:1px solid #c6c6c6;} .left{width:148px; float:left;} .left li{height:80px; border-bottom:1px solid #d5d5d5; border-top:1px solid #f1f1eb; text-align:center; cursor:pointer;} .left img{width:36px; height:36px; margin-top:10px;} .left span{float:left; width:148px; margin-top:7px; color:#2a2a2a; font-size:14px;} .left li.active{background:#fefefe;} .right{width:810px; float:right; position:relative;} .right img{width:810px; height:330px;} .right .tab{position:absolute; left:0; bottom:0; display:none;} .tab li{float:left;} .tab li a{height:30px; line-height:30px; font-size:12px; text-align:center; float:left; background:#5a5a52; margin-right:1px; } .tabs1 a{width:269px;} .tabs2 a{width:201px;} .tabs3 a{width:161px;} .tab .active{background:#ef3263;} .tab li a{color:#fdf0f3;} </style> <script> window.onload = function(){ var oWrap = document.getElementById('wrap'); var oUlLeft = oWrap.getElementsByTagName('ul')[0]; var aLiLeft = oUlLeft.getElementsByTagName('li'); var oDivRight = oWrap.getElementsByTagName('div')[0]; var aUlTab = oDivRight.getElementsByTagName('ul'); var oImg = oDivRight.getElementsByTagName('img')[0]; var num = 0; // 左侧选项卡切换 for(var i=0; i<aLiLeft.length; i++){ aLiLeft[i].index = i; aLiLeft[i].onmouseover = function(){ for(var i=0; i<aLiLeft.length; i++){ aLiLeft[i].className = ''; aUlTab[i].style.display = 'none'; } this.className = 'active'; aUlTab[this.index].style.display = 'block'; num = this.index; oImg.src = 'img/'+ (num+1) + '-1.png'; }; } // 右侧图片选项卡切换 function tabPic(oUlTab){ var aA = oUlTab.getElementsByTagName('a'); for(var i=0; i<aA.length; i++){ aA[i].index = i; aA[i].onmouseover = function(){ for(var i=0; i<aA.length; i++){ aA[i].className = ''; } this.className = 'active'; oImg.src = 'img/' + (num+1) + '-' + (this.index + 1) + '.png'; }; } }; // 函数调用 for(var i=0; i<aUlTab.length; i++){ tabPic(aUlTab[i]); } }; </script> </head> <body> <div id="wrap" class="clearfix"> <ul class="left"> <li class="active"> <a href="#"> <img src="img/hot.png" /> <span>最新团购</span> </a> </li> <li> <a href="#"> <img src="img/bag.png" /> <span>商城特惠</span> </a> </li> <li> <a href="#"> <img src="img/sale.png" /> <span>名品推荐</span> </a> </li> <li> <a href="#"> <img src="img/activity.png" /> <span>缤纷活动</span> </a> </li> </ul> <div class="right"> <img src="img/1-1.png" /> <ul class="tab tabs1" style="display:block;"> <li><a href="#" class="active">雅诗兰黛完美修护唇膏(蓝色花纹管管体)</a></li> <li><a href="#">雅诗兰黛花样唇膏</a></li> <li><a href="#">倩碧卓越润肤乳</a></li> </ul> <ul class="tab tabs2"> <li><a href="#" class="active">肌研满150减30</a></li> <li><a href="#">高性价比低单价商品2.8折起</a></li> <li><a href="#">贝德玛满228送128</a></li> <li><a href="#">吃出健康美态2.8折起</a></li> </ul> <ul class="tab tabs3"> <li><a href="#" class="active">艾格利克全场1.5折起</a></li> <li><a href="#">NO1dora全场1.4折起</a></li> <li><a href="#">伊米妮全场1折起</a></li> <li><a href="#">小熊电器全场1折起</a></li> <li><a href="#">贝缇卡全场1折起</a></li> </ul> <ul class="tab tabs2"> <li><a href="#" class="active">万达歌星2小时欢唱券</a></li> <li><a href="#">Free派-高丝娜蔻眼霜</a></li> <li><a href="#">财付通下单立减 还抽单反</a></li> <li><a href="#">Free派-芙优润天蚕丝面膜</a></li> </ul> </div> </div> </body> </html>
特别注意：图片命名很重要，切换图片都是根据图片命名的数字进行的