原生javascript实现选项卡（基础版）

一、实现原理

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>