我们平时经常会用到tab切换的效果，如下图：
这个效果很常见，用js就可以实现。
布局分析：
我们可以先让其中的一块内容显示，其他的内容先隐藏，当用户点击头部标签时，可以让当前内容隐藏，点击部分的内容显示出来。通过改变标签样式就可以实现。
html、css代码如下：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>tab切换效果</title><style>#tab-nav{overflow: hidden;padding: 0;margin: 0;cursor: hand;}#tab-nav li{float: left;display: block;width: 100px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #bbb;border-bottom: none;}#tab-nav .on{background: #ccc;color: red;}#tab-con div{display: none;}#tab-con .selected{display: block;width: 650px;height: 300px;padding: 30px;line-height: 40px;color: #c3c3c3;border: 1px solid #c3c3c3;}</style></head><body><ul id="tab-nav" type="none"><li class="on">number</li><li>String</li><li>boolean</li><li>undefined</li><li>null</li><li>object</li></ul><div id="tab-con"><div class="selected">number类型表示整型和浮点型，基本的数值字面量格式都是十进制。<br/>此外，整数的字面量还可以是八进制和十六进制。<br/>NaN即非数值，是number类型中的一个特殊值<br/>NaN用于表示本来要返回一个数值的操作数，结果未返回数值的情况（这样不会报错）。<br/></div><div>string类型用于表示由零个或多个16位unicode字符组成的字符序列，即字符串，由双引号或单引号表示。</div><div>boolean类型有两个字面值：true 和 false<br/>在js中所有类型值都有与这两个布尔值等价的值<br/>1.特殊值undefined和null -- false<br/>2.数字0和NaN -- false<br/>3.空字符串 -- false<br/>4.所有其他值 -- true<br/></div><div>undefined类型只有一个特殊值为undefined<br/>声明变量未初始化时，这个变量的值就是undefined<br/></div><div>null类型只有一个特殊值为null<br/>从逻辑角度来看，null表示空对象指针，所以typeof检测时返回object。<br/>如果变量准备在将来用于保存对象，那么该变量最好初始化为null。<br/></div><div>JavaScript中对象其实就是一组数据和功能的集合。<br/>var obj1=[1,2,3];<br/>var obj2={name:'laowang'};<br/></div></div></body></html>
我用了两种思路来实现这个效果。
思路一
首先可以给每一个导航块标记一个index，这样等用户点击导航块时，先将所有的li与tab-con中的子div的className清空，然后再通过index标记，把点击的导航块和对应的div的className分别设置为on和selected。
<script>var lis = document.getElementById("tab-nav").getElementsByTagName("li");var divs = document.getElementById("tab-con").getElementsByTagName("div");for(var i=0;i< lis.length;i++){lis[i].index = i;lis[i].onclick = function(){for(var j=0;j<divs.length;j++){lis[j].className="";divs[j].className="";}lis[i].className = "on";divs[this.index].className="selected";}}</script>
思路二
每次点击事件后，对导航块进行一次遍历判断，找到本次点击的导航块之后，将这个导航块和对应的div的className改变，并且将其他的className清空。
<script>var lis = document.getElementById("tab-nav").getElementsByTagName("li");var divs = document.getElementById("tab-con").getElementsByTagName("div");for(var i=0;i<lis.length;i++){lis[i].onclick = function(){for(var i=0;i<lis.length;i++) {if (this == lis[i]) {lis[i].className = "on";divs[i].className = "selected";}else {lis[i].className = "";divs[i].className = "";}}}}</script>
