本文实例讲述了js实现点击切换TAB标签。分享给大家供大家参考。具体如下：
这里演示的选项卡效果代码，无jq,纯JS来实现，灰色风格，没有怎么美化，或许看上去比较普通，不过兼容性和操作起来挺舒服的，风格适用于大部分的网站，或许你会用得上。
先来看看运行效果截图：
具体代码如下：/p>
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
点击切换选项卡代码
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.tab1{width:401px;border-top:#cccccc solid 1px;border-bottom:#cccccc solid 1px;margin:50px auto 0 auto;}
.menu{height:28px;border-right:#cccccc solid 1px;}
.menu li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#cccccc solid 1px;color:#666;font-size:14px;overflow:hidden;background:#E0E2EB;}
.menu li.off{background:#FFFFFF;color:#336699;font-weight:bold;}
.menudiv{height:200px;border-left:#cccccc solid 1px;border-right:#cccccc solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:15px;line-height:28px;}
function setTab(name,cursel){
cursel_0=cursel;
for(var i=1; i<=links_len; i++){
var menu = document.getElementById(name+i);
var menudiv = document.getElementById("con_"+name+"_"+i);
if(i==cursel){
menu.className="off";
menudiv.style.display="block";
}
else{
menu.className="";
menudiv.style.display="none";
}
}
}
function Next(){
cursel_0++;
if (cursel_0>links_len)cursel_0=1
setTab(name_0,cursel_0);
}
var name_0="one";
var cursel_0=1;
var ScrollTime=3000;//循环周期(毫秒)
var links_len,iIntervalId;
οnlοad=function(){
var links = document.getElementById("tab1").getElementsByTagName("li")
links_len=links.length;
for(var i=0; i
links[i].οnmοuseοver=function(){
clearInterval(iIntervalId);
this.οnmοuseοut=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
}
document.getElementById("con_"+name_0+"_"+links_len).parentNode.οnmοuseοver=function(){
clearInterval(iIntervalId);
this.οnmοuseοut=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
setTab(name_0,cursel_0);
iIntervalId = setInterval(Next,ScrollTime);
}
首页点击看看会自动的我的网站我的网站JS代码,导航菜单看到效果了吗？？？我的网站我做主
希望本文所述对大家的javascript程序设计有所帮助。
