一個不需要jQuery實現的tab選項卡切換效果，代碼簡潔易用。

默認是鼠標懸停顯示tab效果，可將其中的onmouseover 修改為 onclick 點擊效果

使用方法：

1、將附件中的index.html中的css樣式以及代碼部分拷貝到你需要的地方即可

相關鏈接：幾行簡單的jQuery代碼搞定tab標簽切換效果

展示效果圖：

/p>

"http://www.w3.org/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代碼,導航菜單看到效果了嗎？？？我的網站我做主

以上內容就是本文使用簡單純js實現點擊切換TAB標簽實例，希望對大家學習js知識制作網頁特效有所幫助。

總結

以上是生活随笔為你收集整理的html5点击切换选项卡,简单纯js实现点击切换TAB标签实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。