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].οnclick=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].οnclick=function(){
//格式化
for (var i=0;i<aRt.length;i++) {
aRt[i].className="";
}
this.className="act1";
oImg.src=imgArr[num][this.index];
}
}
}