函数传参-嵌套选项卡

HTML

<div class="box">
	<ul id="lf_list"></ul>
	<img src=""/>
	<ul id="rt_list"></ul>
</div>

CSS部分

*{
	margin: 0;
	padding: 0;
}
.box{
	width: 600px;
	height: 400px;
	margin: 50px auto 0;
	position: relative;
}
ul{
	list-style: none;
	position: absolute;
	text-align: center;			
}
ul li{
	border: 1px solid #fff;
	background: palevioletred;
	color: white;
	opacity: 0.7;
	cursor: pointer;
}
ul li:hover{
	opacity: 1;
}
ul .act{
	background: orange;
	opacity: 1;
}
ul .act1{
	background: orangered;
	opacity: 1;
}
#lf_list{
	width: 100px;
	top: 0;
	left: 0;
}
#lf_list li{
	border-top: none;
	border-left: none;
	border-right: none;
}
#rt_list{
	bottom: 0;
	right: 0;
}
#rt_list li{
	height: 50px;
	background: #EF3239;
	float: left;
	line-height: 50px;
	border-top: none;
	border-left: none;
}
img{
	width: 100%;
	height: 100%;
}

JS部分

var imgArr=[
	["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],
	["img/2.jpg","img/3.jpg","img/4.jpg"],
	["img/5.jpg","img/2.jpg","img/3.jpg","img/4.jpg"],
	["img/8.jpg","img/7.jpg","img/1.jpg","img/4.jpg","img/5.jpg","img/2.jpg"]
]
var txtArr=[
	["组一","组一一","组一二","组一三","组一四","组一五"],
	["组二","组二一","组二二","组二三"],
	["组三","组三一","组三二","组三三","组三四"],
	["组四","组四一","组四二","组四三","组四四","组四五","组四六"]
]
var oLf=document.getElementById("lf_list");
var oRt=document.getElementById("rt_list");
var aLf=oLf.getElementsByTagName("li");
var aRt=oRt.getElementsByTagName("li");
var oImg=document.getElementsByTagName("img")[0];
//初始化生成选项卡
//生成左边选项卡
for (var i=0;i<txtArr.length;i++) {
	oLf.innerHTML+="<li>"+txtArr[i][0]+"</li>";
	aLf[i].style.height=400/txtArr.length-1+"px";
	aLf[i].style.lineHeight=400/txtArr.length-1+"px";
}
fn1(0);
var len=aRt.length;
fn2(len,0);
	
for (var i=0;i<aLf.length;i++) {
	fn(i);
}
	
//点击左边选项卡
function fn(num){
	aLf[num].onclick=function(){
		//格式化
		for (var i=0;i<aLf.length;i++) {
			aLf[i].className="";
		}
		oRt.innerHTML="";
		//生成右边的选项卡
		fn1(num);
			
		len=aRt.length;
		fn2(len,num);
	}
}
	
//生成右边选项卡
function fn1(a){
	//生成选项卡
	for (var i=1;i<txtArr[a].length;i++) {
		oRt.innerHTML+="<li>"+txtArr[a][i]+"</li>";
	}
	//计算选项卡宽度
	for (var i=0;i<aRt.length;i++) {
		aRt[i].style.width=(600-100)/aRt.length-1+"px";
	}
	//图片
	oImg.src=imgArr[a][0];
	//按钮状态
	aLf[a].className="act";
	aRt[0].className="act1";
}
//点击右边选项卡
function fn2(len,num){
	for (var i=0;i<len;i++) {
		aRt[i].index=i;
		aRt[i].onclick=function(){
			//格式化
			for (var i=0;i<aRt.length;i++) {
				aRt[i].className="";
			}
			this.className="act1";
			oImg.src=imgArr[num][this.index];
		}
	}
}