选项卡套选项卡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{margin:0;padding:0;list-style:none;}
.box{width:800px;height:400px;border:5px solid #000;margin:50px auto;}
#ulLeft{width:200px;float:left;}
#ulLeft li{height:98px;line-height:98px;border-bottom:2px solid #f00;background:blue;font-size:50px;text-align:center;color:#fff;}
#ulLeft li.active{color:#fff;background:#ccc;}
.boxRight{width:600px;height:400px;float:left;display:none;}
.boxRight a{display:none;background:#6F0;color:#fff;font-size:100px;line-height:360px;height:360px;text-decoration:none;text-align:center;}
.ulTab{width:100%;display:table;height:40px;}
.ulTab li{display:table-cell;text-align:center;background:yellow;color:#000;cursor:pointer;line-height:40px;border-right:2px solid #000;}
.ulTab li.active{color:#fff;background:#f00;}
</style>
<body>
<div class="box" id="boxImg">
<ul id="ulLeft">
<li class="active">a1</li>
<li>b1</li>
<li>c1</li>
<li>d1</li>
</ul>
<div class="boxRight" style="display:block;">
<a href="#" style="display:block;">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<a href="#">a5</a>
<a href="#">a6</a>
<ul class="ulTab">
<li class="active">a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
<li>a5</li>
<li>a6</li>
</ul>
</div>
<div class="boxRight">
<a href="#" style="display:block;">b1</a>
<a href="#">b2</a>
<a href="#">b3</a>
<a href="#">b4</a>
<a href="#">b5</a>
<a href="#">b6</a>
<ul class="ulTab">
<li class="active">b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
<li>b5</li>
<li>b6</li>
</ul>
</div>
<div class="boxRight">
<a href="#" style="display:block;">c1</a>
<a href="#">c2</a>
<a href="#">c3</a>
<a href="#">c4</a>
<a href="#">c5</a>
<a href="#">c6</a>
<ul class="ulTab">
<li class="active">c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
<li>c5</li>
<li>c6</li>
</ul>
</div>
<div class="boxRight">
<a href="#" style="display:block;">d1</a>
<a href="#">d2</a>
<a href="#">d3</a>
<a href="#">d4</a>
<a href="#">d5</a>
<a href="#">d6</a>
<ul class="ulTab">
<li class="active">d1</li>
<li>d2</li>
<li>d3</li>
<li>d4</li>
<li>d5</li>
<li>d6</li>
</ul>
</div>
</div>
<script>
window.onload = function()
{
var oBox = document.getElementById('boxImg');
var aLi = document.getElementById('ulLeft').getElementsByTagName('li');
var aConDiv = oBox.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++)
{
aLi[i].index = i;
aLi[i].onclick = function()
{
for(var i=0;i<aLi.length;i++)
{
aLi[i].className = '';
aConDiv[i].style.display = 'none';
};
this.className = 'active';
aConDiv[this.index].style.display = 'block';
};
};
function tabSwitch( aConDiv )
{
//var aConDiv = oBox.getElementsByTagName('div')[0];
var aTabCon = aConDiv.getElementsByTagName('a');
var aTabLi = aConDiv.getElementsByTagName('li');
for(var i=0;i<aTabLi.length;i++)
{
aTabLi[i].index = i;
aTabLi[i].onclick = function()
{
for(var i=0;i<aTabLi.length;i++)
{
aTabLi[i].className = '';
aTabCon[i].style.display = 'none';
};
this.className = 'active';
aTabCon[this.index].style.display = 'block';
};
};
};
for(var i=0;i<aConDiv.length;i++)
{
tabSwitch( aConDiv[i] );
};
};
</script>
</body>
</html>
浙公网安备 33010602011771号