<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
#nav{
width:120px;
height:392px;
float:left;
}
#nav li{
width:120px;
height:98px;
border:1px #eee solid;
text-align:center;
line-height:100px;
font-weight:bold;
cursor:pointer;
font-weight:bold;
background:#E7E7E7;
list-style-type:none;
}
#nav .active{
background:#FFF;
}
#content{
width:600px;
height:408px;
float:left;
position:relative;
}
#content ul{
position:absolute;
width:100%;
bottom:7px;
text-align:justify;
background:#FFF;
display:none;
opacity:0.6;
}
#content ul li{
list-style-type:none;
display:table-cell;
cursor:pointer;
border:1px solid #eee;
padding:0 20px;
line-height:30px;
text-align:center;
}
#content ul.show{
display:table !important;
}
#content ul li.active{
background:red;
opacity:0.8;
}
#content img{
display:none;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var arrimg = [
['img/5-1.jpg','img/5-2.jpg','img/5-3.jpg'],
['img/5-3.jpg','img/5-4.jpg','img/5-5.jpg','img/5-6.jpg'],
['img/5-3.jpg','img/5-4.jpg','img/5-5.jpg','img/5-6.jpg','img/5-7.jpg'],
['img/5-7.jpg','img/5-8.jpg','img/5-9.jpg','img/5-10.jpg']
];
var oul = document.getElementById('nav');
var ali = oul.getElementsByTagName('li');
var ocontent = document.getElementById('content');
var aul = ocontent.getElementsByTagName('ul');
var aimg = ocontent.getElementsByTagName('img');
var num = 0;
fntab(aul[0]);
for( var i = 0;i < ali.length; i++)
{
ali[i].index = i;
ali[i].onclick = function ()
{
for( var i = 0; i < ali.length; i++ )
{
num = this.index;
ali[i].className = '';
aul[i].className = '';
aimg[i].style.display = 'none';
}
this.className = 'active';
aul[num].className = 'show';
aimg[num].style.display = 'block';
fntab(aul[num]);
};
}
function fntab(ul)
{
var lia = ul.getElementsByTagName('li');
for( var i = 0; i < lia.length; i++ )
{
if(lia[i].className)
{
aimg[num].src = arrimg[num][i];
}
lia[i].index = i;
lia[i].onclick = function ()
{
for( i = 0; i < lia.length; i++)
{
lia[i].className = '';
}
this.className = 'active';
aimg[num].src = arrimg[num][this.index];
}
}
};
};
</script>
</head>
<body>
<div id="wrap">
<ul id="nav">
<li class="active">最热团购</li>
<li>商城优惠</li>
<li>名品推荐</li>
<li>缤纷活动</li>
</ul>
<div id="content">
<img style="display:block;" src="img/5-1.jpg">
<ul class="show">
<li class="active">最热团购Tab1</li>
<li>最热团购Tab2</li>
<li>最热团购Tab3</li>
</ul>
<img src="img/5-3.jpg">
<ul>
<li class="active">商城特惠Tab1</li>
<li>商城特惠Tab2</li>
<li>商城特惠Tab3</li>
<li>商城特惠Tab4</li>
</ul>
<img src="img/5-3.jpg">
<ul>
<li class="active">名品推荐Tab1</li>
<li>名品推荐Tab2</li>
<li>名品推荐Tab3</li>
<li>名品推荐Tab4</li>
<li>名品推荐Tab5</li>
</ul>
<img src="img/5-7.jpg">
<ul>
<li class="active">缤纷活动Tab1</li>
<li>缤纷活动Tab2</li>
<li>缤纷活动Tab3</li>
<li>缤纷活动Tab4</li>
</ul>
</div>
</div>
</body>
</html>
