选项卡导航html代码,一段简洁大方的Tab菜单选项卡的JS特效代码

脚本代码(For Alixixi.com)如下:

阿里西西 Tab选项卡特效 js.alixixi.com

*{margin:0; padding:0; font-size:14px;}

#tablit {margin:50px;width:269px; height:400px; border:#BCE2F3 1px solid;padding-top:10px;background:#E4F2FB;}

#tablit dl{ float:left; width:298px;}

#tablit dl dt{float:left;border-bottom:#64B8E4 1px solid; width:15px; height:31px; line-height:30px;}

#tablit dl dd{float:left;width:110px;height:30px; line-height:30px; text-align:center;}

#tablit .on{border:#64B8E4 1px solid;border-bottom:#FFF 1px solid; color:#FF6600;background:#FFF;}

#tablit .out{border:#64B8E4 1px solid; color:#000;background:#64B8E4;}

.tabcon{width:100%; height:365px; background: #FFF; clear:both;}

.dis{display:none;}

阿里西西模板

阿里西西特效

模板网址 moban.alixixi.com

特效网址 js.alixixi.com

var mDD = document.getElementById("tablit").getElementsByTagName("dd");

var mDIV= document.getElementById("tablit").getElementsByTagName("div");

for (var i=0;i

(function(index) {

mDD[index].onmouseover = function() {

if (mDD[index].className == 'out') {

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

mDD[j].className = 'out';

mDIV[j].style.display = 'none';

}

mDD[index].className = 'on';

mDIV[index].style.display = 'block';

}

}

})(i);

}