我們平時經常會用到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>