一、实现原理
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>