这两天有朋友问原生js怎么实现Tab选项卡的功能，这里使用js实现一下：

css

<style type="text/css">

*{margin:0;padding:0;}

body{font-size:14px;font-family:"Microsoft YaHei";}

ul,li{list-style:none;}

#tab{position:relative;}

#tab .tabList ul li{

float:left;

background:#fefefe;

background:-moz-linear-gradient(top, #fefefe, #ededed);

background:-o-linear-gradient(left top,left bottom, from(#fefefe), to(#ededed));

background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));

border:1px solid #ccc;

padding:5px 0;

width:100px;

text-align:center;

margin-left:-1px;

position:relative;

cursor:pointer;

}

#tab .tabCon{

position:absolute;

left:-1px;

top:32px;

border:1px solid #ccc;

border-top:none;

width:403px;

height:100px;

}

#tab .tabCon div{

padding:10px;

position:absolute;

opacity:0;

filter:alpha(opacity=0);

}

#tab .tabList li.cur{

border-bottom:none;

background:#fff;

}

#tab .tabCon div.cur{

opacity:1;

filter:alpha(opacity=100);

}

</style>

html

<div id="tab" style="margin-left:460px;margin-top:20px">

<div class="tabList">

<ul>

<li class="cur">许嵩</li>

<li>周杰伦</li>

<li>林俊杰</li>

<li>陈奕迅</li>

</ul>

</div>

<div class="tabCon">

<div class="cur">断桥残雪、千百度、幻听、想象之中</div>

<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>

<div>被风吹过的夏天、江南、一千年以后</div>

<div>十年、K歌之王、浮夸</div>

</div>

</div>

js

<script type="text/javascript">

window.onload = function() {

var oDiv = document.getElementById("tab");

var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");

var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");

var timer = null;

for (var i = 0; i < oLi.length; i++) {

oLi[i].index = i;

oLi[i].onmouseover = function() {

show(this.index);

}

}

function show(a) {

index = a;

var alpha = 0;

for (var j = 0; j < oLi.length; j++) {

oLi[j].className = "";

aCon[j].className = "";

aCon[j].style.opacity = 0;

aCon[j].style.filter = "alpha(opacity=0)";

}

oLi[index].className = "cur";

clearInterval(timer);

timer = setInterval(function() {

alpha += 2;

alpha > 100 && (alpha = 100);

aCon[index].style.opacity = alpha / 100;

aCon[index].style.filter = "alpha(opacity=" + alpha + ")";

alpha == 100 && clearInterval(timer);

},5)

}

}

</script>

最终效果图：