JS基础—选项卡套选项卡(函数传参)

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;}

HTML部分：

<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>

JS部分：

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]);}};

预览效果：

特别注意：图片命名很重要，切换图片都是根据图片命名的数字进行的