一个封装了的选项卡效果js
生活随笔
收集整理的這篇文章主要介紹了
一个封装了的选项卡效果js
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>井底的蛙</title>
<script type="text/javascript">
/*
??? 選項卡封裝
??? by 井底的蛙
??? 2008-2-4
*/
opCard = function()
{
??? this.bind = new Array();
??? this.index = 0;??? ??? //默認顯示哪個選項卡，從0開始
???
??? this.style = new Array();??? ??? //["","",""]
??? this.overStyle = false;??? ??? //選項是否有over, out變換樣式事件，樣式為this.style[2]
??? this.overChange = false;??? ??? //內容是否用over, out直接激活
??? this.menu = false;??? ??? ??? ??? //菜單類型
??? this.nesting = [false,false,"",""];??? ??? //是否嵌套，后面2個參數是指定menu,info的子集深度所用id
???
??? this.auto = [false, 1000];??? ??? //自動滾動[true,2000]
??? this.timerID = null;??? ??? ??? //自動播放的
??? this.menutimerID = null;??? ??? //菜單延時的
???
??? this.creat = function(func)
??? {
??? ??? var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
??? ??? var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
??? ??? var my = this, i;
??? ??? var argLen = arguments.length;
??? ??? var arrM = new Array();
??? ???
??? ??? if(this.nesting[0] || this.nesting[1])??? // 有選項卡嵌套
??? ??? {??? // 過濾出需要的數據
??? ??? ??? var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
??? ??? ??? var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
??? ??? }
??? ??? else
??? ??? {
??? ??? ??? var arrMenu = _arrMenu;
??? ??? ??? var arrInfo = _arrInfo;
??? ??? }
??? ???
??? ??? var l = arrMenu.length;
??? ??? if(l!=arrInfo.length){alert("菜單和內容必須擁有相同的數量\n如果需要，你可以放一個空的在那占位。")}
??? ???
??? ??? // 修正
??? ??? if(this.menu){this.auto=false;this.overChange=true;} //如果是菜單，則沒有自動運行，有over, out直接激活
??? ???
??? ??? // 循環添加各個事件等
??? ??? for(i=0;i<l;i++)
??? ??? {
??? ??? ??? arrMenu[i].cName = arrMenu[i].className;
??? ??? ??? arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);??? ??? //加載樣式，菜單的話統一樣式
??? ??? ???
??? ??? ??? if(arrMenu[i].getAttribute("skip")) // 需要跳過的容器
??? ??? ??? {
??? ??? ??? ??? if(this.overStyle || this.overChange)??? // 有over, out 改變樣式 或者 激活
??? ??? ??? ??? {
??? ??? ??? ??? ??? arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
??? ??? ??? ??? ??? arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
??? ??? ??? ??? }
??? ??? ??? ??? arrMenu[i].onclick = function(){if(argLen==1){func()}}
??? ??? ??? ??? arrInfo[i].style.display = "none";
??? ??? ??? ??? continue;
??? ??? ??? }
??? ??? ???
??? ??? ??? if(i!=this.index || this.menu){arrInfo[i].style.display="none"};??? //隱藏初始化，菜單的話全部隱藏
??? ??? ??? arrMenu[i].index = i;??? //記錄自己激活值[序號]
??? ??? ??? arrInfo[i].index = i;
??? ??? ???
??? ??? ???
??? ??? ??? if(this.overChange)??? //有鼠標over, out事件
??? ??? ??? {
??? ??? ??? ??? arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
??? ??? ??? ??? arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
??? ??? ??? }
??? ??? ??? else??? //onclick觸發
??? ??? ??? {
??? ??? ??? ??? arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
??? ??? ??? ??? if(this.overStyle)??? // 有over, out 改變樣式
??? ??? ??? ??? {
??? ??? ??? ??? ??? arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
??? ??? ??? ??? ??? arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
??? ??? ??? ??? }
??? ??? ??? ??? else??? // 沒有over, out 改變樣式
??? ??? ??? ??? {
??? ??? ??? ??? ??? if(this.auto[0])??? // 有自動運行
??? ??? ??? ??? ??? {
??? ??? ??? ??? ??? ??? arrMenu[i].onmouseover = function(){autoStop(this, 0);}
??? ??? ??? ??? ??? ??? arrMenu[i].onmouseout = function(){autoStop(this, 1);}
??? ??? ??? ??? ??? }
??? ??? ??? ??? }
??? ??? ??? }
??? ??? ???
??? ??? ??? if(this.auto[0] || this.menu)??? //arrinfo 控制自動播放
??? ??? ??? {
??? ??? ??? ??? arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}
??? ??? ??? ??? arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
??? ??? ??? }
??? ??? }??? //for結束
??? ???
??? ??? if(this.auto[0])
??? ??? {
??? ??? ??? this.timerID = setTimeout(autoMove,this.auto[1])
??? ??? }
??? ???
??? ??? // 自動播放
??? ??? function autoMove()
??? ??? {
??? ??? ??? var n;
??? ??? ??? n = my.index + 1;
??? ??? ??? if(n==l){n=0};
??? ??? ??? while(arrMenu[n].getAttribute("skip"))??? ??? // 需要跳過的容器
??? ??? ??? {
??? ??? ??? ??? n += 1;
??? ??? ??? ??? if(n==l){n=0};
??? ??? ??? }
??? ??? ??? changeOption(arrMenu[n]);
??? ??? ??? my.timerID = setTimeout(autoMove,my.auto[1]);
??? ??? }
??? ???
??? ??? // onmouseover時，自動播放停止。num：0為over，1為out。 obj暫時無用。 -_-!!
??? ??? function autoStop(obj, num)
??? ??? {
??? ??? ??? if(!my.auto[0]){return;}
??? ??? ??? //if(obj.index==my.index)
??? ??? ??? num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
??? ??? }
??? ???
??? ??? // 改變選項卡
??? ??? function changeOption(obj)
??? ??? {
??? ??? ??? arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);??? //修改舊內容
??? ??? ??? arrInfo[my.index].style.display = "none";??? //隱藏舊內容
??? ??? ???
??? ??? ??? obj.className = getClass(obj,my.style[1]);??? ??? //修改為新樣式
??? ??? ??? arrInfo[obj.index].style.display = "";??? //顯示新內容
??? ??? ???
??? ??? ??? my.index = obj.index;??? //更新當前選擇的index
??? ??? }
??? ???
??? ??? /*??? ???
??? ??? ??? 只有onclick時，overStyle的onmouseover,onmouseout事件。用來預激活
??? ??? ??? obj：目標對象。??? num：1為over，0為out
??? ??? */
??? ??? function changeTitle(obj, num)
??? ??? {
??? ??? ??? if(!my.overStyle){return;};
??? ??? ??? if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
??? ??? }
??? ???
??? ??? /*??? ???
??? ??? ??? 菜單類型時用
??? ??? ??? obj：目標對象。??? num：1為over，0為out
??? ??? */
??? ??? function changeMenu(num)
??? ??? {
??? ??? ??? if(!my.menu){return;}
??? ??? ??? num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
??? ??? }
??? ???
??? ??? //關閉菜單
??? ??? function menuClose()
??? ??? {
??? ??? ??? arrInfo[my.index].style.display = "none";
??? ??? ??? arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
??? ??? }
??? ???
??? ??? // 得到className（防止將原有樣式覆蓋）
??? ??? function getClass(o, s)
??? ??? {
??? ??? ??? if(o.cName==""){return s}
??? ??? ??? else{return o.cName + " " + s}
??? ??? }
??? ???
??? ??? //嵌套情況下得到真正的子集
??? ??? function getChilds(arrObj, id, num)
??? ??? {
??? ??? ??? var depth = 0;
??? ??? ??? var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);??? ??? //得到第一個子集
??? ??? ??? do??? //計算深度
??? ??? ??? {
??? ??? ??? ??? if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
??? ??? ??? ??? firstObj = firstObj.parentNode;
??? ??? ??? }
??? ??? ??? while(firstObj.tagName.toLowerCase()!="body")??? // body強制退出。
??? ??? ???
??? ??? ??? var t;
??? ??? ??? var arr = new Array();
??? ??? ??? for(i=0;i<arrObj.length;i++)??? //過濾出需要的數據
??? ??? ??? {
??? ??? ??? ??? t = arrObj[i], d = 0;
??? ??? ??? ??? do
??? ??? ??? ??? {
??? ??? ??? ??? ??? if(t.parentNode.getAttribute("id")==id && d == depth)
??? ??? ??? ??? ??? {???
??? ??? ??? ??? ??? ??? arr.push(arrObj[i]);break;??? ??? //得到數據
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? else
??? ??? ??? ??? ??? {
??? ??? ??? ??? ??? ??? if(d==depth){break};d+=1;
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? t = t.parentNode;
??? ??? ??? ??? }
??? ??? ??? ??? while(t.tagName.toLowerCase()!="body")??? // body強制退出
??? ??? ??? }
??? ??? ??? return arr;
??? ??? }
??? }
}
window.onload = function()
{
??? var aa = new opCard();
??? aa.bind = ["a1","div","b1","div"];
??? aa.style = ["a1_0","a1_1","a1_0"];
??? aa.index = 0;
??? aa.nesting = [false,true,"",""]
??? aa.creat();
??? aa =null;
???
??? // 默認的onclick中，第一個例子
??? var bba = new opCard();
??? bba.bind = ["a2","li","b2","div"];
??? bba.style = ["style1","style2","style3"];
??? bba.overStyle = true;
??? bba.creat();
??? bba = null;
???
??? // 默認的onclick中，第二個例子
??? var bbb = new opCard();
??? bbb.bind = ["a3","li","b3","div"];
??? bbb.style = ["style1","style2","style3"];
??? bbb.overStyle = true;
??? bbb.creat();
??? bbb = null;
???
??? // onmousover觸發中的例子
??? var cc = new opCard();
??? cc.bind = ["a4","li","b4","div"];
??? cc.style = ["style1","style2","style3"];
??? cc.overStyle = true;
??? cc.overChange = true;
??? cc.creat();
??? cc = null;
???
??? //自動播放auto第一個例子
??? var dd = new opCard();
??? dd.bind = ["a5","li","b5","div"];
??? dd.style = ["style1","style2","style3"];
??? dd.auto = [true, 3000];
??? dd.creat();
??? dd = null;
???
??? //自動播放auto第二個例子
??? var ee = new opCard();
??? ee.bind = ["a6","li","b6","div"];
??? ee.style = ["style1","style2","style3"];
??? ee.auto = [true, 2000];
??? ee.overChange = true;
??? ee.creat();
??? ee = null;
???
??? //自動播放auto第三個例子
??? var ff = new opCard();
??? ff.bind = ["a7","li","b7","div"];
??? ff.style = ["style1","style2","style3"];
??? ff.auto = [true, 1000];
??? ff.overChange = true;
??? ff.overStyle = true;
??? ff.creat();
??? ff = null;
???
??? //菜單導航例子
??? var gg = new opCard();
??? gg.bind = ["a8","li","b8","div"];
??? gg.style = ["style1","style2","style3"];
??? gg.overStyle = true;
??? gg.menu = true;
??? gg.creat();
??? gg = null;
???
??? //其他應用
??? var hh = new opCard();
??? hh.bind = ["a9","li","a9","li"];
??? hh.style = ["style4","style4","style4"];
??? //hh.overStyle = true;
??? hh.auto = [true, 1000];
??? hh.creat();
??? hh = null;
}
</script>
<style type="text/css">
body{font-size:12px; font-family:Verdana,"宋體";}
p,ul{margin:0px; padding:0px;}
td,div{font-size:12px}
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{text-decoration:underline;}
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{color:#0066FF;}
/* */
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{margin-right:20px;}
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
? <tr>
??? <td id="a1" width="140" valign="top" align="center">
??? ??? <div class="test">簡單介紹</div>
??? ??? <div class="test">默認的onclick</div>
??? ??? <div class="test">onmousover觸發</div>
??? ??? <div class="test">自動播放auto</div>
??? ??? <div class="test">菜單導航</div>
??? ??? <div class="test">關于嵌套</div>
??? ??? <div class="test">其他應用</div>
??? ??? <div class="test">一些說明</div>
??? ??? <div class="test"> </div>
??? ??? <div class="test"> </div>
??? ??? <div class="test"> </div>
??? ??? <div class="test"> </div>
??? </td>
??? <td id="b1" valign="top">
??? ??? <div class="s">
??? ??? ??? 封裝了一個選項卡，不過已經不像選項卡了-_-!!!<br><br>
??? ??? ??? 現稍微說明下吧，如果不明白的話，旁邊有幾個例子可能說明起來更清楚些<br><br>
??? ??? ??? <p>
??? ??? ??? <strong>obj.bind = ["a1","td","b1","div"];</strong><br>
??? ??? ??? 綁定id="a1"下的td標簽為菜單，綁定id="b1"下的div標簽為內容，簡單么？<br>
??? ??? ??? td標簽的數量和div標簽的數量必須相同<br>
??? ??? ??? （若不需要顯示內容，只顯示菜單話，可以這個在td標簽上加<td skip="true">）<br>
??? ??? ??? 如果id="a1"下的td標簽有嵌套表格，這樣的話，就不是所有的td都是菜單，這時候需要用下nesting<br><br>
??? ??? ???
??? ??? ??? <strong>obj.nesting = [false,true,"",""];</strong><br>
??? ??? ??? 當標簽tag有嵌套時，需要用到這個<br>
??? ??? ??? 比如選項卡內容是放在div容器里，而本身這個內容里也有div標簽，這時就需要用到<br>
??? ??? ??? 菜單嵌套為false，內容嵌套為true，且會自動判斷出內容標簽，多數時候這樣就可以了<br>
??? ??? ??? 判斷方法為，認定getElementsByTagName后第一個標簽為內容第一項，其他的就用這個第一項的深度來判斷<br>
??? ??? ??? 但有些情況下，這樣還是不行<br>
??? ??? ??? 我用后面2個參數做id來指定菜單或者內容的第一項nesting = [false,true,"","q2"];<br>
??? ??? ??? 這樣就肯定不會錯了（不明白的話看下例子就簡單多了）<br><br>
??? ??? ???
??? ??? ??? <strong>obj.index = 0;</strong><br>
??? ??? ??? 默認顯示第幾個選項卡，序號從0開始<br><br>
??? ??? ???
??? ??? ??? <strong>obj.style = ["c1","c2","c3"]</strong><br>
??? ??? ??? 菜單加載的樣式的className：<br>
??? ??? ??? 菜單未選中的className是c1<br>
??? ??? ??? 菜單選中的className是c2<br>
??? ??? ??? 菜單onmouseover的className是c3<br><br>
??? ??? ???
??? ??? ??? <strong>obj.overStyle = false;</strong><br>
??? ??? ??? 選項卡是否有onmouseover, onmouseout變換樣式事件[非激活選項卡內容]，對應的樣式為style[2]<br><br>
??? ??? ???
??? ??? ??? <strong>obj.overChange = false;</strong><br>
??? ??? ??? 選項卡內容是否用onmouseover, onmouseout直接激活<br><br>
??? ??? ???
??? ??? ??? <strong>obj.menu = false;</strong><br>
??? ??? ??? 選項卡是菜單類型<br><br>
??? ??? ??? <strong>obj.auto = [false, 1000];</strong><br>
??? ??? ??? 選項卡是否自動播放，播放速度（毫秒）<br><br>
??? ??? ???
??? ??? ??? <strong>obj.creat();</strong><br>
??? ??? ??? 開始生成選項卡，需要onclick觸發事件的話，可以obj.creat(函數名)<br>
??? ??? ??? 所有的都會觸發
??? ??? ??? </p>
??? ??? </div>
??? ??? <div class="s">
??? ??? <!--默認的onclick中，第一個例子-->
??? ??? ? <div id="a2">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li>3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b2">
??? ??? ??? <div>這個例子是用onclick觸發的<br>并設置overStyle = true;<br>(over，out改變樣式,但不激活)</div>
??? ??? ??? <div>
??? ??? ??? ??? var bba = new opCard();<br>
??? ??? ??? ??? bba.bind = ["a2","li","b2","div"];<br>
??? ??? ??? ??? bba.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? bba.overStyle = true;<br>
??? ??? ??? ??? bba.creat();<br>
??? ??? ??? ??? bba = null;
??? ??? ??? </div>
??? ??? ??? <div>33333</div>
??? ??? ??? <div>4444444</div>
??? ??? ? </div><br>
??? ??? <!--默認的onclick中，第二個例子-->
??? ??? ? <div id="a3">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li>3</li>
??? ??? ??? ? <li skip="true">4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b3">
??? ??? ??? <div>
??? ??? ??? ??? 這個例子是比上面增加skip="true"<br>即<li skip="true">4</li><br>所以選項卡4是沒有內容的<br>
??? ??? ??? ??? 你可以為選項卡的文字直接加上鏈接，我這里就不加了
??? ??? ??? </div>
??? ??? ??? <div>222222</div>
??? ??? ??? <div>33333</div>
??? ??? ??? <div>4444444</div>
??? ??? ? </div>
??? ??? </div>
??? ??? <div class="s">
??? ??? <!--onmousover觸發中的例子-->
??? ??? ? <div id="a4">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li skip="true">3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b4">
??? ??? ??? <div>這個例子是用onmouseover觸發的<br>(over，out直接激活)<br>并且<li skip="true">3</li>[選項卡3不會被激活]<br>overStyle = true;</div>
??? ??? ??? <div>
??? ??? ??? ??? var cc = new opCard();<br>
??? ??? ??? ??? cc.bind = ["a4","li","b4","div"];<br>
??? ??? ??? ??? cc.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? cc.overStyle = true;<br>
??? ??? ??? ??? cc.overChange = true;<br>
??? ??? ??? ??? cc.creat();<br>
??? ??? ??? ??? cc = null;
??? ??? ??? </div>
??? ??? ??? <div>33333</div>
??? ??? ??? <div>4444444</div>
??? ??? ? </div>
??? ??? </div>
??? ??? <div class="s">
??? ??? <!--自動播放auto第一個例子-->
??? ??? ? <div id="a5">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li>3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b5">
??? ??? ??? <div>1111111<br>我每3秒切換一個選項卡</div>
??? ??? ??? <div>
??? ??? ??? ??? var ee = new opCard();<br>
??? ??? ??? ??? ee.bind = ["a6","li","b6","div"];<br>
??? ??? ??? ??? ee.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? ee.auto = [true, 2000];<br>
??? ??? ??? ??? ee.overChange = true;<br>
??? ??? ??? ??? ee.creat();<br>
??? ??? ??? ??? ee = null;
??? ??? ??? </div>
??? ??? ??? <div>33333<br>我每3秒切換一個選項卡</div>
??? ??? ??? <div>4444444<br>我每3秒切換一個選項卡</div>
??? ??? ? </div>
??? ??? ? <div>注：<strong>鼠標在選項卡任意位置都會使停止播放</strong><br><br>下面這個結合overChange一起</div>
??? ??? ? <!--自動播放auto第二個例子-->
??? ??? ? <div id="a6">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li>3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b6">
??? ??? ??? <div>1111111<br>我每2秒切換一個選項卡</div>
??? ??? ??? <div>
??? ??? ??? ??? var dd = new opCard();<br>
??? ??? ??? ??? dd.bind = ["a5","li","b5","div"];<br>
??? ??? ??? ??? dd.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? dd.auto = [true, 3000];<br>
??? ??? ??? ??? dd.creat();<br>
??? ??? ??? ??? dd = null;<br>
??? ??? ??? </div>
??? ??? ??? <div>33333<br>我每2秒切換一個選項卡</div>
??? ??? ??? <div>4444444<br>我每2秒切換一個選項卡</div>
??? ??? ? </div>
??? ??? ? <div><br>下面這個再來個<li skip="true">3</li>，且overStyle=true;</div>
??? ??? ? <!--自動播放auto第三個例子-->
??? ??? ? <div id="a7">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li skip="true">3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b7">
??? ??? ??? <div>1111111<br>我每1秒切換一個選項卡</div>
??? ??? ??? <div>
??? ??? ??? ??? var ff = new opCard();<br>
??? ??? ??? ??? ff.bind = ["a7","li","b7","div"];<br>
??? ??? ??? ??? ff.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? ff.auto = [true, 1000];<br>
??? ??? ??? ??? ff.overChange = true;<br>
??? ??? ??? ??? ff.overStyle = true;<br>
??? ??? ??? ??? ff.creat();<br>
??? ??? ??? ??? ff = null;
??? ??? ??? </div>
??? ??? ??? <div>33333<br>我每1秒切換一個選項卡</div>
??? ??? ??? <div>4444444<br>我每1秒切換一個選項卡</div>
??? ??? ? </div>
??? ??? </div>
??? ??? <!--菜單導航的例子-->
??? ??? <div class="s">
??? ??? ? <div id="a8">
??? ??? ??? <ul>
??? ??? ??? ? <li skip="true">首頁</li>
??? ??? ??? ? <li>新聞</li>
??? ??? ??? ? <li>論壇</li>
??? ??? ??? ? <li skip="true">聯系我們</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b8">
??? ??? ??? <div></div>
??? ??? ??? <div><a href="#">國內新聞</a><a href="#">國際新聞</a><a href="#">娛樂新聞</a><a href="#">體育新聞</a></div>
??? ??? ??? <div><a href="#">藍色理想</a><a href="#">blue idea</a></div>
??? ??? ??? <div></div>
??? ??? ? </div>
??? ??? ? <div><strong>注：菜單延時一秒關閉</strong><br>這里只是演示，實際可以設置下position什么的。-o-<br>多級菜單不知道能不能支持，沒試過</div>
??? ??? </div>
??? ??? <div class="s">
??? ??? ??? 我見過的許多選項卡都不能用來嵌套<br>但還是有些時候會用到的<br>
??? ??? ??? 所以如您所見，這個演示本身就是一個嵌套，效果還不錯
??? ??? </div>
??? ??? <!--其他應用-->
??? ??? <div class="s">
??? ??? ??? 比如圖片切換什么，不過我太懶了，不寫了。。。<br>
??? ??? ??? 這個能干什么，我也不知道。。
??? ??? ??? <div id="a9">
??? ??? ??? ? <li>新年好啊</li>
??? ??? ??? ? <li>快過年了</li>
??? ??? ??? ? <li>天好冷啊</li>
??? ??? ??? ? <li>大家去搶紅包吧</li>
??? ??? ??? ? <li>紅包~！紅包~！你在哪里啊？</li>
??? ??? ??? </div>??? ??? ???
??? ??? ???
??? ??? </div>
??? ??? <div class="s">
??? ??? ??? 選項卡標題（或者菜單）必須和選項卡內容的數量相同，否則會出錯<br>即使選項卡菜單skip="true"，內容也要放一個空的標簽占位<br>
??? ??? ??? 其他好像暫時沒發現什么<br><br>
??? ??? ??? 本來打算加入ajax的，但有些還沒想好。<br>
??? ??? ??? 效率的話，應該還行，我這個演示放了幾個選項卡，似乎還不錯<br><br>
??? ??? ??? 寫這個的目的就是以后弄選項卡只要處理樣式就可以了，很多選項卡或者切換之類都是大同小異<br>
??? ??? ??? 本來是打算弄些特效在里面，考慮會增加不少代碼，所以不加了，簡潔點。<br><br>
??? ??? ???
??? ??? ??? 哦，還有選項卡是附加樣式，不會取消原本設置的樣式<br>
??? ??? ??? 如左邊的下劃線是原有的樣式
??? ??? </div>
??? ??? <div class="s">啥都沒有1</div>
??? ??? <div class="s">啥都沒有2</div>
??? ??? <div class="s">啥都沒有3</div>
??? ??? <div class="s">啥都沒有4</div>
??? </td>
? </tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>井底的蛙</title>
<script type="text/javascript">
/*
??? 選項卡封裝
??? by 井底的蛙
??? 2008-2-4
*/
opCard = function()
{
??? this.bind = new Array();
??? this.index = 0;??? ??? //默認顯示哪個選項卡，從0開始
???
??? this.style = new Array();??? ??? //["","",""]
??? this.overStyle = false;??? ??? //選項是否有over, out變換樣式事件，樣式為this.style[2]
??? this.overChange = false;??? ??? //內容是否用over, out直接激活
??? this.menu = false;??? ??? ??? ??? //菜單類型
??? this.nesting = [false,false,"",""];??? ??? //是否嵌套，后面2個參數是指定menu,info的子集深度所用id
???
??? this.auto = [false, 1000];??? ??? //自動滾動[true,2000]
??? this.timerID = null;??? ??? ??? //自動播放的
??? this.menutimerID = null;??? ??? //菜單延時的
???
??? this.creat = function(func)
??? {
??? ??? var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]);
??? ??? var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
??? ??? var my = this, i;
??? ??? var argLen = arguments.length;
??? ??? var arrM = new Array();
??? ???
??? ??? if(this.nesting[0] || this.nesting[1])??? // 有選項卡嵌套
??? ??? {??? // 過濾出需要的數據
??? ??? ??? var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu;
??? ??? ??? var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo;
??? ??? }
??? ??? else
??? ??? {
??? ??? ??? var arrMenu = _arrMenu;
??? ??? ??? var arrInfo = _arrInfo;
??? ??? }
??? ???
??? ??? var l = arrMenu.length;
??? ??? if(l!=arrInfo.length){alert("菜單和內容必須擁有相同的數量\n如果需要，你可以放一個空的在那占位。")}
??? ???
??? ??? // 修正
??? ??? if(this.menu){this.auto=false;this.overChange=true;} //如果是菜單，則沒有自動運行，有over, out直接激活
??? ???
??? ??? // 循環添加各個事件等
??? ??? for(i=0;i<l;i++)
??? ??? {
??? ??? ??? arrMenu[i].cName = arrMenu[i].className;
??? ??? ??? arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);??? ??? //加載樣式，菜單的話統一樣式
??? ??? ???
??? ??? ??? if(arrMenu[i].getAttribute("skip")) // 需要跳過的容器
??? ??? ??? {
??? ??? ??? ??? if(this.overStyle || this.overChange)??? // 有over, out 改變樣式 或者 激活
??? ??? ??? ??? {
??? ??? ??? ??? ??? arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
??? ??? ??? ??? ??? arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
??? ??? ??? ??? }
??? ??? ??? ??? arrMenu[i].onclick = function(){if(argLen==1){func()}}
??? ??? ??? ??? arrInfo[i].style.display = "none";
??? ??? ??? ??? continue;
??? ??? ??? }
??? ??? ???
??? ??? ??? if(i!=this.index || this.menu){arrInfo[i].style.display="none"};??? //隱藏初始化，菜單的話全部隱藏
??? ??? ??? arrMenu[i].index = i;??? //記錄自己激活值[序號]
??? ??? ??? arrInfo[i].index = i;
??? ??? ???
??? ??? ???
??? ??? ??? if(this.overChange)??? //有鼠標over, out事件
??? ??? ??? {
??? ??? ??? ??? arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
??? ??? ??? ??? arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);}
??? ??? ??? }
??? ??? ??? else??? //onclick觸發
??? ??? ??? {
??? ??? ??? ??? arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
??? ??? ??? ??? if(this.overStyle)??? // 有over, out 改變樣式
??? ??? ??? ??? {
??? ??? ??? ??? ??? arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
??? ??? ??? ??? ??? arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
??? ??? ??? ??? }
??? ??? ??? ??? else??? // 沒有over, out 改變樣式
??? ??? ??? ??? {
??? ??? ??? ??? ??? if(this.auto[0])??? // 有自動運行
??? ??? ??? ??? ??? {
??? ??? ??? ??? ??? ??? arrMenu[i].onmouseover = function(){autoStop(this, 0);}
??? ??? ??? ??? ??? ??? arrMenu[i].onmouseout = function(){autoStop(this, 1);}
??? ??? ??? ??? ??? }
??? ??? ??? ??? }
??? ??? ??? }
??? ??? ???
??? ??? ??? if(this.auto[0] || this.menu)??? //arrinfo 控制自動播放
??? ??? ??? {
??? ??? ??? ??? arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);}
??? ??? ??? ??? arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
??? ??? ??? }
??? ??? }??? //for結束
??? ???
??? ??? if(this.auto[0])
??? ??? {
??? ??? ??? this.timerID = setTimeout(autoMove,this.auto[1])
??? ??? }
??? ???
??? ??? // 自動播放
??? ??? function autoMove()
??? ??? {
??? ??? ??? var n;
??? ??? ??? n = my.index + 1;
??? ??? ??? if(n==l){n=0};
??? ??? ??? while(arrMenu[n].getAttribute("skip"))??? ??? // 需要跳過的容器
??? ??? ??? {
??? ??? ??? ??? n += 1;
??? ??? ??? ??? if(n==l){n=0};
??? ??? ??? }
??? ??? ??? changeOption(arrMenu[n]);
??? ??? ??? my.timerID = setTimeout(autoMove,my.auto[1]);
??? ??? }
??? ???
??? ??? // onmouseover時，自動播放停止。num：0為over，1為out。 obj暫時無用。 -_-!!
??? ??? function autoStop(obj, num)
??? ??? {
??? ??? ??? if(!my.auto[0]){return;}
??? ??? ??? //if(obj.index==my.index)
??? ??? ??? num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
??? ??? }
??? ???
??? ??? // 改變選項卡
??? ??? function changeOption(obj)
??? ??? {
??? ??? ??? arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);??? //修改舊內容
??? ??? ??? arrInfo[my.index].style.display = "none";??? //隱藏舊內容
??? ??? ???
??? ??? ??? obj.className = getClass(obj,my.style[1]);??? ??? //修改為新樣式
??? ??? ??? arrInfo[obj.index].style.display = "";??? //顯示新內容
??? ??? ???
??? ??? ??? my.index = obj.index;??? //更新當前選擇的index
??? ??? }
??? ???
??? ??? /*??? ???
??? ??? ??? 只有onclick時，overStyle的onmouseover,onmouseout事件。用來預激活
??? ??? ??? obj：目標對象。??? num：1為over，0為out
??? ??? */
??? ??? function changeTitle(obj, num)
??? ??? {
??? ??? ??? if(!my.overStyle){return;};
??? ??? ??? if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])}
??? ??? }
??? ???
??? ??? /*??? ???
??? ??? ??? 菜單類型時用
??? ??? ??? obj：目標對象。??? num：1為over，0為out
??? ??? */
??? ??? function changeMenu(num)
??? ??? {
??? ??? ??? if(!my.menu){return;}
??? ??? ??? num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
??? ??? }
??? ???
??? ??? //關閉菜單
??? ??? function menuClose()
??? ??? {
??? ??? ??? arrInfo[my.index].style.display = "none";
??? ??? ??? arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);
??? ??? }
??? ???
??? ??? // 得到className（防止將原有樣式覆蓋）
??? ??? function getClass(o, s)
??? ??? {
??? ??? ??? if(o.cName==""){return s}
??? ??? ??? else{return o.cName + " " + s}
??? ??? }
??? ???
??? ??? //嵌套情況下得到真正的子集
??? ??? function getChilds(arrObj, id, num)
??? ??? {
??? ??? ??? var depth = 0;
??? ??? ??? var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);??? ??? //得到第一個子集
??? ??? ??? do??? //計算深度
??? ??? ??? {
??? ??? ??? ??? if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1}
??? ??? ??? ??? firstObj = firstObj.parentNode;
??? ??? ??? }
??? ??? ??? while(firstObj.tagName.toLowerCase()!="body")??? // body強制退出。
??? ??? ???
??? ??? ??? var t;
??? ??? ??? var arr = new Array();
??? ??? ??? for(i=0;i<arrObj.length;i++)??? //過濾出需要的數據
??? ??? ??? {
??? ??? ??? ??? t = arrObj[i], d = 0;
??? ??? ??? ??? do
??? ??? ??? ??? {
??? ??? ??? ??? ??? if(t.parentNode.getAttribute("id")==id && d == depth)
??? ??? ??? ??? ??? {???
??? ??? ??? ??? ??? ??? arr.push(arrObj[i]);break;??? ??? //得到數據
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? else
??? ??? ??? ??? ??? {
??? ??? ??? ??? ??? ??? if(d==depth){break};d+=1;
??? ??? ??? ??? ??? }
??? ??? ??? ??? ??? t = t.parentNode;
??? ??? ??? ??? }
??? ??? ??? ??? while(t.tagName.toLowerCase()!="body")??? // body強制退出
??? ??? ??? }
??? ??? ??? return arr;
??? ??? }
??? }
}
window.onload = function()
{
??? var aa = new opCard();
??? aa.bind = ["a1","div","b1","div"];
??? aa.style = ["a1_0","a1_1","a1_0"];
??? aa.index = 0;
??? aa.nesting = [false,true,"",""]
??? aa.creat();
??? aa =null;
???
??? // 默認的onclick中，第一個例子
??? var bba = new opCard();
??? bba.bind = ["a2","li","b2","div"];
??? bba.style = ["style1","style2","style3"];
??? bba.overStyle = true;
??? bba.creat();
??? bba = null;
???
??? // 默認的onclick中，第二個例子
??? var bbb = new opCard();
??? bbb.bind = ["a3","li","b3","div"];
??? bbb.style = ["style1","style2","style3"];
??? bbb.overStyle = true;
??? bbb.creat();
??? bbb = null;
???
??? // onmousover觸發中的例子
??? var cc = new opCard();
??? cc.bind = ["a4","li","b4","div"];
??? cc.style = ["style1","style2","style3"];
??? cc.overStyle = true;
??? cc.overChange = true;
??? cc.creat();
??? cc = null;
???
??? //自動播放auto第一個例子
??? var dd = new opCard();
??? dd.bind = ["a5","li","b5","div"];
??? dd.style = ["style1","style2","style3"];
??? dd.auto = [true, 3000];
??? dd.creat();
??? dd = null;
???
??? //自動播放auto第二個例子
??? var ee = new opCard();
??? ee.bind = ["a6","li","b6","div"];
??? ee.style = ["style1","style2","style3"];
??? ee.auto = [true, 2000];
??? ee.overChange = true;
??? ee.creat();
??? ee = null;
???
??? //自動播放auto第三個例子
??? var ff = new opCard();
??? ff.bind = ["a7","li","b7","div"];
??? ff.style = ["style1","style2","style3"];
??? ff.auto = [true, 1000];
??? ff.overChange = true;
??? ff.overStyle = true;
??? ff.creat();
??? ff = null;
???
??? //菜單導航例子
??? var gg = new opCard();
??? gg.bind = ["a8","li","b8","div"];
??? gg.style = ["style1","style2","style3"];
??? gg.overStyle = true;
??? gg.menu = true;
??? gg.creat();
??? gg = null;
???
??? //其他應用
??? var hh = new opCard();
??? hh.bind = ["a9","li","a9","li"];
??? hh.style = ["style4","style4","style4"];
??? //hh.overStyle = true;
??? hh.auto = [true, 1000];
??? hh.creat();
??? hh = null;
}
</script>
<style type="text/css">
body{font-size:12px; font-family:Verdana,"宋體";}
p,ul{margin:0px; padding:0px;}
td,div{font-size:12px}
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;}
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;}
.test{text-decoration:underline;}
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 div.s strong{color:#0066FF;}
/* */
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;}
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;}
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;}
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;}
#b8 div a{margin-right:20px;}
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
? <tr>
??? <td id="a1" width="140" valign="top" align="center">
??? ??? <div class="test">簡單介紹</div>
??? ??? <div class="test">默認的onclick</div>
??? ??? <div class="test">onmousover觸發</div>
??? ??? <div class="test">自動播放auto</div>
??? ??? <div class="test">菜單導航</div>
??? ??? <div class="test">關于嵌套</div>
??? ??? <div class="test">其他應用</div>
??? ??? <div class="test">一些說明</div>
??? ??? <div class="test"> </div>
??? ??? <div class="test"> </div>
??? ??? <div class="test"> </div>
??? ??? <div class="test"> </div>
??? </td>
??? <td id="b1" valign="top">
??? ??? <div class="s">
??? ??? ??? 封裝了一個選項卡，不過已經不像選項卡了-_-!!!<br><br>
??? ??? ??? 現稍微說明下吧，如果不明白的話，旁邊有幾個例子可能說明起來更清楚些<br><br>
??? ??? ??? <p>
??? ??? ??? <strong>obj.bind = ["a1","td","b1","div"];</strong><br>
??? ??? ??? 綁定id="a1"下的td標簽為菜單，綁定id="b1"下的div標簽為內容，簡單么？<br>
??? ??? ??? td標簽的數量和div標簽的數量必須相同<br>
??? ??? ??? （若不需要顯示內容，只顯示菜單話，可以這個在td標簽上加<td skip="true">）<br>
??? ??? ??? 如果id="a1"下的td標簽有嵌套表格，這樣的話，就不是所有的td都是菜單，這時候需要用下nesting<br><br>
??? ??? ???
??? ??? ??? <strong>obj.nesting = [false,true,"",""];</strong><br>
??? ??? ??? 當標簽tag有嵌套時，需要用到這個<br>
??? ??? ??? 比如選項卡內容是放在div容器里，而本身這個內容里也有div標簽，這時就需要用到<br>
??? ??? ??? 菜單嵌套為false，內容嵌套為true，且會自動判斷出內容標簽，多數時候這樣就可以了<br>
??? ??? ??? 判斷方法為，認定getElementsByTagName后第一個標簽為內容第一項，其他的就用這個第一項的深度來判斷<br>
??? ??? ??? 但有些情況下，這樣還是不行<br>
??? ??? ??? 我用后面2個參數做id來指定菜單或者內容的第一項nesting = [false,true,"","q2"];<br>
??? ??? ??? 這樣就肯定不會錯了（不明白的話看下例子就簡單多了）<br><br>
??? ??? ???
??? ??? ??? <strong>obj.index = 0;</strong><br>
??? ??? ??? 默認顯示第幾個選項卡，序號從0開始<br><br>
??? ??? ???
??? ??? ??? <strong>obj.style = ["c1","c2","c3"]</strong><br>
??? ??? ??? 菜單加載的樣式的className：<br>
??? ??? ??? 菜單未選中的className是c1<br>
??? ??? ??? 菜單選中的className是c2<br>
??? ??? ??? 菜單onmouseover的className是c3<br><br>
??? ??? ???
??? ??? ??? <strong>obj.overStyle = false;</strong><br>
??? ??? ??? 選項卡是否有onmouseover, onmouseout變換樣式事件[非激活選項卡內容]，對應的樣式為style[2]<br><br>
??? ??? ???
??? ??? ??? <strong>obj.overChange = false;</strong><br>
??? ??? ??? 選項卡內容是否用onmouseover, onmouseout直接激活<br><br>
??? ??? ???
??? ??? ??? <strong>obj.menu = false;</strong><br>
??? ??? ??? 選項卡是菜單類型<br><br>
??? ??? ??? <strong>obj.auto = [false, 1000];</strong><br>
??? ??? ??? 選項卡是否自動播放，播放速度（毫秒）<br><br>
??? ??? ???
??? ??? ??? <strong>obj.creat();</strong><br>
??? ??? ??? 開始生成選項卡，需要onclick觸發事件的話，可以obj.creat(函數名)<br>
??? ??? ??? 所有的都會觸發
??? ??? ??? </p>
??? ??? </div>
??? ??? <div class="s">
??? ??? <!--默認的onclick中，第一個例子-->
??? ??? ? <div id="a2">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li>3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b2">
??? ??? ??? <div>這個例子是用onclick觸發的<br>并設置overStyle = true;<br>(over，out改變樣式,但不激活)</div>
??? ??? ??? <div>
??? ??? ??? ??? var bba = new opCard();<br>
??? ??? ??? ??? bba.bind = ["a2","li","b2","div"];<br>
??? ??? ??? ??? bba.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? bba.overStyle = true;<br>
??? ??? ??? ??? bba.creat();<br>
??? ??? ??? ??? bba = null;
??? ??? ??? </div>
??? ??? ??? <div>33333</div>
??? ??? ??? <div>4444444</div>
??? ??? ? </div><br>
??? ??? <!--默認的onclick中，第二個例子-->
??? ??? ? <div id="a3">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li>3</li>
??? ??? ??? ? <li skip="true">4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b3">
??? ??? ??? <div>
??? ??? ??? ??? 這個例子是比上面增加skip="true"<br>即<li skip="true">4</li><br>所以選項卡4是沒有內容的<br>
??? ??? ??? ??? 你可以為選項卡的文字直接加上鏈接，我這里就不加了
??? ??? ??? </div>
??? ??? ??? <div>222222</div>
??? ??? ??? <div>33333</div>
??? ??? ??? <div>4444444</div>
??? ??? ? </div>
??? ??? </div>
??? ??? <div class="s">
??? ??? <!--onmousover觸發中的例子-->
??? ??? ? <div id="a4">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li skip="true">3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b4">
??? ??? ??? <div>這個例子是用onmouseover觸發的<br>(over，out直接激活)<br>并且<li skip="true">3</li>[選項卡3不會被激活]<br>overStyle = true;</div>
??? ??? ??? <div>
??? ??? ??? ??? var cc = new opCard();<br>
??? ??? ??? ??? cc.bind = ["a4","li","b4","div"];<br>
??? ??? ??? ??? cc.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? cc.overStyle = true;<br>
??? ??? ??? ??? cc.overChange = true;<br>
??? ??? ??? ??? cc.creat();<br>
??? ??? ??? ??? cc = null;
??? ??? ??? </div>
??? ??? ??? <div>33333</div>
??? ??? ??? <div>4444444</div>
??? ??? ? </div>
??? ??? </div>
??? ??? <div class="s">
??? ??? <!--自動播放auto第一個例子-->
??? ??? ? <div id="a5">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li>3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b5">
??? ??? ??? <div>1111111<br>我每3秒切換一個選項卡</div>
??? ??? ??? <div>
??? ??? ??? ??? var ee = new opCard();<br>
??? ??? ??? ??? ee.bind = ["a6","li","b6","div"];<br>
??? ??? ??? ??? ee.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? ee.auto = [true, 2000];<br>
??? ??? ??? ??? ee.overChange = true;<br>
??? ??? ??? ??? ee.creat();<br>
??? ??? ??? ??? ee = null;
??? ??? ??? </div>
??? ??? ??? <div>33333<br>我每3秒切換一個選項卡</div>
??? ??? ??? <div>4444444<br>我每3秒切換一個選項卡</div>
??? ??? ? </div>
??? ??? ? <div>注：<strong>鼠標在選項卡任意位置都會使停止播放</strong><br><br>下面這個結合overChange一起</div>
??? ??? ? <!--自動播放auto第二個例子-->
??? ??? ? <div id="a6">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li>3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b6">
??? ??? ??? <div>1111111<br>我每2秒切換一個選項卡</div>
??? ??? ??? <div>
??? ??? ??? ??? var dd = new opCard();<br>
??? ??? ??? ??? dd.bind = ["a5","li","b5","div"];<br>
??? ??? ??? ??? dd.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? dd.auto = [true, 3000];<br>
??? ??? ??? ??? dd.creat();<br>
??? ??? ??? ??? dd = null;<br>
??? ??? ??? </div>
??? ??? ??? <div>33333<br>我每2秒切換一個選項卡</div>
??? ??? ??? <div>4444444<br>我每2秒切換一個選項卡</div>
??? ??? ? </div>
??? ??? ? <div><br>下面這個再來個<li skip="true">3</li>，且overStyle=true;</div>
??? ??? ? <!--自動播放auto第三個例子-->
??? ??? ? <div id="a7">
??? ??? ??? <ul>
??? ??? ??? ? <li>1</li>
??? ??? ??? ? <li>2</li>
??? ??? ??? ? <li skip="true">3</li>
??? ??? ??? ? <li>4</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b7">
??? ??? ??? <div>1111111<br>我每1秒切換一個選項卡</div>
??? ??? ??? <div>
??? ??? ??? ??? var ff = new opCard();<br>
??? ??? ??? ??? ff.bind = ["a7","li","b7","div"];<br>
??? ??? ??? ??? ff.style = ["style1","style2","style1"];<br>
??? ??? ??? ??? ff.auto = [true, 1000];<br>
??? ??? ??? ??? ff.overChange = true;<br>
??? ??? ??? ??? ff.overStyle = true;<br>
??? ??? ??? ??? ff.creat();<br>
??? ??? ??? ??? ff = null;
??? ??? ??? </div>
??? ??? ??? <div>33333<br>我每1秒切換一個選項卡</div>
??? ??? ??? <div>4444444<br>我每1秒切換一個選項卡</div>
??? ??? ? </div>
??? ??? </div>
??? ??? <!--菜單導航的例子-->
??? ??? <div class="s">
??? ??? ? <div id="a8">
??? ??? ??? <ul>
??? ??? ??? ? <li skip="true">首頁</li>
??? ??? ??? ? <li>新聞</li>
??? ??? ??? ? <li>論壇</li>
??? ??? ??? ? <li skip="true">聯系我們</li>
??? ??? ??? </ul>
??? ??? ? </div>
??? ??? ? <div id="b8">
??? ??? ??? <div></div>
??? ??? ??? <div><a href="#">國內新聞</a><a href="#">國際新聞</a><a href="#">娛樂新聞</a><a href="#">體育新聞</a></div>
??? ??? ??? <div><a href="#">藍色理想</a><a href="#">blue idea</a></div>
??? ??? ??? <div></div>
??? ??? ? </div>
??? ??? ? <div><strong>注：菜單延時一秒關閉</strong><br>這里只是演示，實際可以設置下position什么的。-o-<br>多級菜單不知道能不能支持，沒試過</div>
??? ??? </div>
??? ??? <div class="s">
??? ??? ??? 我見過的許多選項卡都不能用來嵌套<br>但還是有些時候會用到的<br>
??? ??? ??? 所以如您所見，這個演示本身就是一個嵌套，效果還不錯
??? ??? </div>
??? ??? <!--其他應用-->
??? ??? <div class="s">
??? ??? ??? 比如圖片切換什么，不過我太懶了，不寫了。。。<br>
??? ??? ??? 這個能干什么，我也不知道。。
??? ??? ??? <div id="a9">
??? ??? ??? ? <li>新年好啊</li>
??? ??? ??? ? <li>快過年了</li>
??? ??? ??? ? <li>天好冷啊</li>
??? ??? ??? ? <li>大家去搶紅包吧</li>
??? ??? ??? ? <li>紅包~！紅包~！你在哪里啊？</li>
??? ??? ??? </div>??? ??? ???
??? ??? ???
??? ??? </div>
??? ??? <div class="s">
??? ??? ??? 選項卡標題（或者菜單）必須和選項卡內容的數量相同，否則會出錯<br>即使選項卡菜單skip="true"，內容也要放一個空的標簽占位<br>
??? ??? ??? 其他好像暫時沒發現什么<br><br>
??? ??? ??? 本來打算加入ajax的，但有些還沒想好。<br>
??? ??? ??? 效率的話，應該還行，我這個演示放了幾個選項卡，似乎還不錯<br><br>
??? ??? ??? 寫這個的目的就是以后弄選項卡只要處理樣式就可以了，很多選項卡或者切換之類都是大同小異<br>
??? ??? ??? 本來是打算弄些特效在里面，考慮會增加不少代碼，所以不加了，簡潔點。<br><br>
??? ??? ???
??? ??? ??? 哦，還有選項卡是附加樣式，不會取消原本設置的樣式<br>
??? ??? ??? 如左邊的下劃線是原有的樣式
??? ??? </div>
??? ??? <div class="s">啥都沒有1</div>
??? ??? <div class="s">啥都沒有2</div>
??? ??? <div class="s">啥都沒有3</div>
??? ??? <div class="s">啥都沒有4</div>
??? </td>
? </tr>
</table>
</body>
</html>
總結
以上是生活随笔為你收集整理的一个封装了的选项卡效果js的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 列举网络芳邻的网络资源
- 下一篇： 梦到自己即将要坐牢怎么回事