趁着公司不忙，抓紧充充电，开始可能会写的不好，但是每写一个都是一点进步，哈哈，加油
用js实现选项卡切换
1.获取元素
2.初始状态
3.通过循环清空元素状态
4.点击操作以及对应的内容切换
5.自定义索引（通过HTML加进去的自定义属性，部分浏览器不支持，必须通过js添加）
html代码：
<body> <ul id="list" class="clearFix"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> </ul> <div>111</div> <div>222</div> <div>333</div> <div>444</div> </body>
css代码：
<link rel="stylesheet" type="text/css" href="css/public.css"/> <style type="text/css"> #list li{float:left;width: 100px;height: 40px;line-height: 40px;text-align: center;background: #dbdbdb;cursor: pointer;} #list li.light{background: #45B035;color: #fff;} div{width: 400px;height: 400px;line-height: 400px;text-align: center;background: #999;display: none;} </style>
js代码：
<script type="text/javascript"> window.onload=function(){ var oList=document.getElementById("list"); var aLi=oList.getElementsByTagName("li"); var aDiv=document.getElementsByTagName("div"); aLi[0].className="light"; aDiv[0].style.display="block"; for(var i=0;i<aLi.length;i++){ aLi[i].index=i; aLi[i].onclick=function(){ for(var i=0;i<aLi.length;i++){ aLi[i].className=""; aDiv[i].style.display="none"; } this.className="light"; aDiv[this.index].style.display="block"; } } }
效果：
