一、实现原理
1、主要运用“排他思想”，在设置当前元素前，先把相应元素恢复到默认状态
2、给相应元素添加下标的应用
二、代码展示
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,li{ list-style: none; }
ul{display: block;overflow: hidden; clear: both;}
li{display:block;float: left; width: 200px; height: 40px;line-height: 40px; text-align: center; background:#eee; color: #333;cursor: pointer;}
li.on{ background:orange; color: #fff;}
div{width:600px;display: none; height: 400px; text-align: center;line-height: 400px; border:1px solid #eee; box-sizing: border-box;}
</style>
</head>
<body>
<ul id="box">
<li class="on">国内</li>
<li>国外</li>
<li>市政</li>
</ul>
<div style="display: block;">国内</div>
<div>国外</div>
<div>市政</div>
</body>
<script type="text/javascript">
var oLis = document.getElementsByTagName('li');
var oDiv = document.getElementsByTagName('div');
for (var i = 0; i < oLis.length; i++) {
//给每个li设置下标
oLis[i].index = i;
oLis[i].onclick = function(){
//li点击时，拍他思想，把所有的li去掉选中状态，所有的div都隐藏
for (var j = 0; j < oLis.length; j++) {
oLis[j].className = '';
oDiv[j].style.display = 'none';
}
// 设置当前点击的li为选中状态
this.className = 'on';
// 根据当前li的下标，设置对应的div展示出来
oDiv[this.index].style.display = 'block';
}
}
</script>
</html>
