背景：
因為在最近的Asp.net項目中使用到前端中的Tab切換，因這兩種方法在Asp.net中的使用的差異，導緻走了不少彎路，特下這篇分享，記錄下自己解決這個問題的心路曆程。
JS 原生的寫法：
使用前端的Tab切換有兩種方法能夠實作：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0px;
padding:0px;
list-style:none;
}
#box {
width:140px;
height:160px;
border:2px solid grey;
margin:0 auto;
padding:0px;
/*text-align:center;*/
}
#head span {
width:30px;
height:20px;
border:1px solid black;
text-align:center;
line-height:20px;
display:inline-block;
}
#content>li {
width:140px;
height:136px;
border:1px solid red;
display:none;
text-align:center;
line-height:40px;
}
#head .select {
background:yellow;
color:white;
}
#content>.show {
display:block;
}
</style>
</head>
<body>
<div id="box">
<h5 id="head">
<span class="select">1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</h5>
<ul id="content">
<li class="show" >內容1</li>
<li>內容2</li>
<li>內容3</li>
<li>內容4</li>
</ul>
</div>
<script>
var Espan = document.getElementsByTagName("span");
var Eli = document.getElementsByTagName("li");
//第一次循環用于擷取所有的的span元素
for (var i = 0; i < Espan.length; i++)
{
Espan[i].index = i;//自定義Espan屬性index用于記錄span的序号
Espan[i].onclick = function ()
{
//擷取所用的span元素并把所有的className清空
for (var k = 0; k < Espan.length; k++)
{
Espan[k].className = "";
}
this.className = "select";//找觸發對象進行類的添加
//擷取所有的li元素并把所有的li元素的className清空
for (var j = 0; j < Eli.length; j++)
{
Eli[j].className = "";
}
Eli[this.index].className = "show";//根據自定義的span屬性記錄的被點選的span的下标，進行查找對li添加類對象
}
}
</script>
</body>
</html>
注意：在使用JS原生寫的時候，要記錄下對應的span下的序号，以便對下面的li進行一一的對應進行内容的呈現和顯示。當然記錄的方法有也有其他的，這個暫時我就先用這一種。
JQ中Tab的寫法：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0px;
padding:0px;
list-style:none;
}
#box {
width:140px;
height:160px;
border:2px solid grey;
margin:0 auto;
padding:0px;
/*text-align:center;*/
}
#head span {
width:30px;
height:20px;
border:1px solid black;
text-align:center;
line-height:20px;
display:inline-block;
}
#content>li {
width:140px;
height:136px;
border:1px solid red;
display:none;
text-align:center;
line-height:40px;
}
#head .select {
background:yellow;
color:white;
}
#content>.show {
display:block;
}
</style>
</head>
<body>
<div id="box">
<h5 id="head">
<span class="select">1</span>
<span>1</span>
<span>1</span>
<span>1</span>
</h5>
<ul id="content">
<li class="show" >內容1</li>
<li>內容2</li>
<li>內容3</li>
<li>內容4</li>
</ul>
</div>
<script src="JS/jquery.min.js"></script>
<script>
//注意jq中的下标的寫法，這種方法會經常用到，尤其是一一對應的效果中eq($(this).index())
$(function () {
$('#head span').click(function (event) {
$(this).addClass('select').siblings().removeClass('select');
$('#content li').eq($(this).index()).addClass('show').siblings().removeClass('show');
})
});
</script>
</body>
</html>
注意其中擷取事件的觸發對象用的this是$(this),其中的擷取下标的方法用到的非常多是方法index()不是index切記。
在原生中index是屬性但是在jq中使用的是$（this）.index()方法。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)