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

预览效果：

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