<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0px;
padding:0px;
}
#tabNav{
/* 清楚子集元素浮动对其的影响 */
overflow:hidden;
}
#tabNav li{
list-style: none;
width: 100px;
height: 40px;
border:1px solid red;
float: left;
text-align: center;
line-height: 40px;
}
#tabNav .active{
background-color: red;
}
#wrap div{
width: 406px;
height: 200px;
/* 把元素隐藏 */
display: none;
}
#wrap .show{
display: block;
border:1px solid red;
}
</style>
</head>
<body>
<ul id="tabNav">
<li class="active">话费</li>
<li>旅行</li>
<li>车险</li>
<li>游戏</li>
</ul>
<div id="wrap">
<div class="show">
话费
</div>
<div>
旅行
</div>
<div>
车险
</div>
<div>
游戏
</div>
</div>
<script>
// 需求：点击指定li时，li变成选中样式,其他li回复默认，让对应的div标签显示出来,其他的div标签隐藏
// 事件编程:1.事件源 2.事件 3.事件处理函数
// 通过id先找到所有li的父级元素
var tabNav=document.getElementById("tabNav");
// 通过父级元素找到所有子集的li,并放入数组中
var tabNavLis=tabNav.getElementsByTagName("li");
// 找到所有的div元素并放入数组中
var wrap=document.getElementById("wrap");
var wrapDivs=wrap.getElementsByTagName("div");
//利用循环遍历数组，给每个元素添加事件
for(var n=0;n<tabNavLis.length;n++){
//由于需要知道当前点击的li是第几个li，所有利用挖我曾循环分发事件的同时，给每个li分发一个位置属性
tabNavLis[n].index=n;
tabNavLis[n].onclick=function(){
// 利用排他思想现将所有的li类名清空
for(var j=0;j<tabNavLis.length;j++){
tabNavLis[j].className="";
}
// 给选中的div加上指定的类名
this.className="active";
// 利用排他思想，先将所有的div类名清空
for(var j=0;j<wrapDivs.length;j++){
wrapDivs[j].className="";
}
// 让指定的div加上显示的类名
wrapDivs[this.index].className="show";
}
}
</script>
</body>
</html>
