<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
#warp {
width: 800px;
border: 1px solid #000000;
margin: 20px auto;
background: blue;
height: 362px;
}
#left_list {
float: left
}
#left_list li {
width: 200px;
height: 89px;
background: red;
margin-bottom: 2px;
color: #fff;
font: 50px/89px "黑体";
text-align: center;
}
#left_list .active {
background: yellow;
color: #000;
}
#right {
float: left
}
#right a {
display: block;
width: 600px;
height: 322px;
text-align: center;
color: #000;
font: 100px/322px "Microsoft YaHei";
text-decoration: none;
background: #0f0;
}
#right li {
height: 40px;
float: left;
width: 148px;
background: #909;
text-align: center;
font: 20px/40px "Microsoft YaHei";
margin-right: 2px;
color: #fff;
}
#right .active {
background: #fff;
color: #000;
}
#right div {
display: none;
}
</style>
</head>
<body>
<div id="warp">
<ul id="left_list">
<li class="active">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div id="right">
<div class="right_box" style="display: block">
<a href="#">a1</a>
<ul>
<li class="active">a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
</ul>
</div>
<div class="right_box">
<a href="#">b1</a>
<ul>
<li class="active">b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
</ul>
</div>
<div class="right_box">
<a href="#">c1</a>
<ul>
<li class="active">c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
</ul>
</div>
<div class="right_box">
<a href="#">d1</a>
<ul>
<li class="active">d1</li>
<li>d2</li>
<li>d3</li>
<li>d4</li>
</ul>
</div>
</div>
</div>
<script>
//1.获取要操作的元素
var leftList = document.getElementById("left_list"),
oLis = leftList.getElementsByTagName("li");
var right = document.getElementById("right"),
rightBoxs = right.getElementsByClassName("right_box");
//绑定事件
for (var i = 0; i < oLis.length; i++) {
//自定义索引
oLis[i].index = i;
// 给每一个左边的li绑定事件
oLis[i].onmouseover = function () {
//先让所有这个li和对应的div清空激活样式
for (var j = 0; j < oLis.length; j++) {
oLis[j].className = "";
rightBoxs[j].style.display = "none";
}
//再让当前这个li和对应的div有激活样式
this.className = "active";
rightBoxs[this.index].style.display = "block";
move(this.index);
}
}
function move(n) {
//获取当前这个小的选项卡的li和a标签
var rightBox = rightBoxs[n];
var rightBoxLis = rightBox.getElementsByTagName("li"),
a = rightBox.getElementsByTagName("a")[0];
//绑定事件
for (var k = 0; k < rightBoxLis.length; k++) {
rightBoxLis[k].onmouseover = function () {
//先让所有这个li和对应的a清空激活样式
for (var i = 0; i < rightBoxLis.length; i++) {
rightBoxLis[i].className = "";
a.innerText = "";
}
//再让当前这个li和对应的a有激活样式
this.className = "active";
// 将当前这个li的内容赋值给a标签
a.innerText = this.innerText;
}
}
}
</script>
</body>
</html>