原生JS写的网站常用简洁TAB选项卡是一款代码简洁易用，兼容主流浏览器。 这款代码特别用到了渐显效果，这在一般原生JS中较少见，只常见于jquery写的网页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS网站常用简洁TAB选项卡</title>
<style>
*{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>
<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].onclick = 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>
</head>
<!-- 代码 开始 -->
<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>
<!-- 代码 结束 -->
<div style="clear:both"></div><br /><br /><br /><br /><br /><br />
<div style="text-align:center">
<p></p>
</div>
</body>
</html>来源：站长窝
评论 (0)