點擊標(biāo)簽切換和自動切換DIV選項卡
更新時間：2014年08月10日 09:20:30 投稿：whsnow
點擊標(biāo)簽切換DIV的效果，在很多地方都有見到過，而且實現(xiàn)的方法有很多，本例介紹的這個可以切換和自動切換DIV選項卡
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>點擊切換和自動切換選項卡</title>
<style type="text/css">
*{list-style:none;margin:0;padding:0;overflow:hidden}
.tab1{width:401px;border-top:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;margin:50px 200px;}
.menu{width:400px;background:#eee;height:28px;border-right:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;}
li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#A8C29F solid 1px;color:#666;font-size:14px;overflow:hidden}
.menudiv{width:399px;height:300px;border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:15px;line-height:28px;}
.off{background:#E0E2EB;color:#336699;font-weight:bold}
</style>
<script type="text/javascript">
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 links_len,iIntervalId;
onload=function(){
var links = document.getElementById("tab1").getElementsByTagName('li')
links_len=links.length;
for(var i=0; i<links_len; i++){
links[i].onmouseover=function(){
clearInterval(iIntervalId);
}
}
document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
clearInterval(iIntervalId);
}
setTab(name_0,cursel_0);
}
</script>
</head>
<body>
<h3> </h3>
<div class="tab1" id="tab1">
<div class="menu">
<ul>
<li id="one1" onclick="setTab('one',1)">標(biāo)簽1</li>
<li id="one2" onclick="setTab('one',2)">標(biāo)簽2</li>
<li id="one3" onclick="setTab('one',3)">標(biāo)簽3</li>
<li id="one4" onclick="setTab('one',4)">標(biāo)簽4</li>
</ul>
</div>
<div class="menudiv">
<div id="con_one_1"><h4 style="color:red">標(biāo)簽1-內(nèi)容</h4></div>
<div id="con_one_2" style="display:none;"><h4 style="color:red">標(biāo)簽2-內(nèi)容</h4></div>
<div id="con_one_3" style="display:none;"><h4 style="color:red">標(biāo)簽3-內(nèi)容</h4></div>
<div id="con_one_4" style="display:none;"><h4 style="color:red">標(biāo)簽4-內(nèi)容</h4></div>
</div>
</div>
</body>
相關(guān)文章
JS注釋所產(chǎn)生的bug 即使注釋也會執(zhí)行
寫js時出現(xiàn)個bug一直提示我JAVA類中的一個屬性沒有，可是明明注釋掉了，后來才知道，JS里即使注釋也會執(zhí)行2013-11-11
這篇文章主要為大家詳細(xì)介紹了js仿QQ郵箱收件人選擇與搜索功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript實現(xiàn)簡易購物車最全代碼解析(ES6面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡易購物車最全代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
PixiJS學(xué)習(xí)之Sprite類的使用詳解
Sprite 直譯為 “精靈”，是游戲開發(fā)中常見的術(shù)語，就是將一個角色的多個動作放到一個圖片里，通過裁剪局部區(qū)域得到當(dāng)前的角色狀態(tài)圖。本文主要介紹了PixiJS中Sprite類的使用，需要的可以參考一下2023-02-02
TypeScript 引用資源文件后提示找不到的異常處理技巧
這篇文章主要介紹了TypeScript 引用資源文件后提示找不到的異常處理,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
這篇文章主要幫助大家輕松實現(xiàn)JavaScript圖片切換，內(nèi)容很精簡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了微信小程序封裝自定義彈窗的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
微信小程序的商戶系統(tǒng)一般是以接口的形式開發(fā)的,小程序通過調(diào)用與后端約定好的接口進(jìn)行參數(shù)的傳遞以及數(shù)據(jù)的接收,下面這篇文章主要給大家介紹了關(guān)于微信小程序支付功能(前端)的相關(guān)資料,需要的朋友可以參考下2023-02-02
ES6使用Set數(shù)據(jù)結(jié)構(gòu)實現(xiàn)數(shù)組的交集、并集、差集功能示例
這篇文章主要介紹了ES6使用Set數(shù)據(jù)結(jié)構(gòu)實現(xiàn)數(shù)組的交集、并集、差集功能,結(jié)合實例形式分析了ES6中Set數(shù)據(jù)結(jié)構(gòu)的相關(guān)函數(shù)與實現(xiàn)數(shù)組交集、并集、差集的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
Javascript 嚴(yán)格模式use strict詳解
嚴(yán)格模式：由ECMA-262規(guī)范定義的JavaScript標(biāo)準(zhǔn)，對javascrip的限制更強(qiáng)。這篇文章主要介紹了Javascript 嚴(yán)格模式use strict詳解 ,需要的朋友可以參考下2017-09-09