<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Me Tab Effect </title>
<script type="text/javascript">
/*
Tab encapsulation
by The frog at the bottom of the well
2008-2-4
*/
opCard = function()
{
= new Array();
= 0; // Which tab is displayed by default, starting from 0
= new Array(); //["","",""]
= false; //Is there an over, out transform style event for the option, the style is [2]
= false; //Whether the content is over, out directly activate
= false;
= [false,false,"",""]; =[false,false,"","];
= [false, 1000]; //Automatic scrolling [true, 2000]
= null;
= null; //Menu delay
= function(func)
{
var _arrMenu = ([0]).getElementsByTagName([1]);
var _arrInfo = ([2]).getElementsByTagName([3]);
var my = this, i;
var argLen = ;
var arrM = new Array();
if([0] ||[1]) // There are tab nesting
{ // Filter out the required data
var arrMenu = [0]?getChilds(_arrMenu,[0],2):_arrMenu;
var arrInfo = [1]?getChilds(_arrInfo,[2],3):_arrInfo;
}
else
{
var arrMenu = _arrMenu;
var arrInfo = _arrInfo;
}
var l = ;
if(l!=){alert("The menu and content must have the same number\nIf necessary, you can put an empty place to occupy it.")}
// Fixed
if(){=false;=true;}//If it is a menu, it does not run automatically, and there is over, out directly activates
// Looping up various events, etc.
for(i=0;i<l;i++)
{
arrMenu[i].cName = arrMenu[i].className;
arrMenu[i].className = (i!= || )?getClass(arrMenu[i],[0]):getClass(arrMenu[i],[1]); //Loading style, the same style for menu
if(arrMenu[i].getAttribute("skip")) // Container to be skipped
{
if( || ) // There is over, out change the style or activate
{
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]. = "none";
continue;
}
if(i!= || ){arrInfo[i].="none"}; //Hide initialization, all menus are hidden
arrMenu[i].index= i; //Record your own activation value [serial number]
arrInfo[i].index = i;
if() //There is a mouse over, out event
{
arrMenu[i].onmouseover = function(){changeOption(this);?changeMenu(1):autoStop(this, 0);}
arrMenu[i].onmouseout = function(){changeOption(this);?changeMenu(0):autoStop(this, 1);}
}
else //onclick trigger
{
arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}}
if() // There is over, out change the style
{
arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);}
arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
}
else else // No over, out change the style
{
If([0]) �
{
arrMenu[i].onmouseover = function(){autoStop(this, 0);}
arrMenu[i].onmouseout = function(){autoStop(this, 1);}
}
}
}
if([0] ||) //arrinfo Control automatic playback
{
arrInfo[i].onmouseover = function(){?changeMenu(1):autoStop(this, 0);}
arrInfo[i].onmouseout = function(){?changeMenu(0):autoStop(this, 1);}
}
} //For end
if([0])
{
= setTimeout(autoMove,[1])
}
// Automatic playback
function autoMove()
{
var n;
n = + 1;
if(n==l){n=0};
while(arrMenu[n].getAttribute("skip"))
{
n += 1;
if(n==l){n=0};
}
changeOption(arrMenu[n]);
= setTimeout(autoMove,[1]);
}
// When onmouseover, the automatic playback stops. num: 0 is over and 1 is out. Obj is useless for the time being. -_-!!
function autoStop(obj, num)
{
if(![0]){return;}
//if(==)
num == 0 ? clearTimeout() : = setTimeout(autoMove,[1]);
}
// Change the tab
function changeOption(obj)
{
arrMenu[].className = getClass(arrMenu[],[0]); //Modify the old content
arrInfo[].= "none"; //Hide old content
= getClass(obj,[1]); //Modify to a new style
arrInfo[].= ""; //Show new content
=; //Update the currently selected index
}
/*
Only onclick, overStyle's onmouseover, onmouseout event. Used to pre-activate
obj: Target object. num: 1 is over, 0 is out
*/
function changeTitle(obj, num)
{
if(!){return;};
if(!=){ = getClass(obj,[num])}
}
/*
Used when using menu types
obj: Target object. num: 1 is over, 0 is out
*/
function changeMenu(num)
{
if(!){return;}
num==0? = setTimeout(menuClose,1000):clearTimeout()
}
//Close the menu
function menuClose()
{
arrInfo[]. = "none";
arrMenu[].className = [0];
}
// Get className (prevent the original style from being overwritten)
function getClass(o, s)
{
if(==""){return s}
else{return + " " + s}
}
//Get real subsets under nesting situation
function getChilds(arrObj, id, num)
{
var depth = 0;
var firstObj = [num]==""?arrObj[0]:([num]); �
do //Calculation depth
{
if(("id")==id){break}else{depth+=1}
firstObj = ;
}
while(()!="body") // body forces exit.
var t;
var arr = new Array();
for(i=0;i<;i++) //Filter out the required data
{
t = arrObj[i], d = 0;
do
{
if(("id")==id && d == depth)
{
(arrObj[i]);break; �
}
else
{
if(d==depth){break};d+=1;
}
t = ;
}
while(()!="body") // body force exit
}
return arr;
}
}
}
= function()
{
var aa = new opCard();
= ["a1","div","b1","div"];
= ["a1_0","a1_1","a1_0"];
= 0;
= [false,true,"",""]
();
aa =null;
// The first example in the default onclick
var bba = new opCard();
= ["a2","li","b2","div"];
= ["style1","style2","style3"];
= true;
();
bba = null;
// The default onclick, the second example
var bbb = new opCard();
= ["a3","li","b3","div"];
= ["style1","style2","style3"];
= true;
();
bbb = null;
// Example in onmousover trigger
var cc = new opCard();
= ["a4","li","b4","div"];
= ["style1","style2","style3"];
= true;
= true;
();
cc = null;
//The first example of autoplay
var dd = new opCard();
= ["a5","li","b5","div"];
= ["style1","style2","style3"];
= [true, 3000];
();
dd = null;
//Auto-play auto second example
var ee = new opCard();
= ["a6","li","b6","div"];
= ["style1","style2","style3"];
= [true, 2000];
= true;
();
ee = null;
//The third example of autoplay
var ff = new opCard();
= ["a7","li","b7","div"];
= ["style1","style2","style3"];
= [true, 1000];
= true;
= true;
();
ff = null;
//Menu Navigation Example
var gg = new opCard();
= ["a8","li","b8","div"];
= ["style1","style2","style3"];
= true;
= true;
();
gg = null;
//Other applications
var hh = new opCard();
= ["a9","li","a9","li"];
= ["style4","style4","style4"];
// = true;
= [true, 1000];
();
hh = null;
}
</script>
<style type="text/css">
body{font-size:12px; font-family:Verdana,"An An";}
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 {border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;}
#b1 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 width="140" valign="top" align="center">
<div class="test">Simple introduction</div>
<div class="test">default onclick</div>
<div class="test">onmousover trigger</div>
<div class="test">auto play auto</div>
<div class="test">Menu Navigation</div>
<div class="test">About nesting</div>
<div class="test">Other applications</div>
<div class="test">Some instructions</div>
<div class="test"> </div>
<div class="test"> </div>
<div class="test"> </div>
<div class="test"> </div>
</td>
<td valign="top">
<div class="s">
Encapsulated a tab, but it no longer looks like a tab -_-!!!<br><br>
Let’s explain it briefly. If you don’t understand, there are a few examples next to it that may make it clearer<br><br>
<p>
<strong> = ["a1","td","b1","div"];</strong><br>
The td tag under the binding is a menu, and the div tag under the binding is content, is it simple? <br>
The number of td tags and div tags must be the same<br>
(If you do not need to display content, only display menu words, you can add <td skip="true"> on the td tag)<br>
If the td tag below has a nested table, then not all tds are menus. At this time, you need to use nesting<br><br>
<strong> = [false,true,"",""];</strong><br>
When the tag tag is nested, this is needed<br>
For example, the content of the tab is placed in the div container, and the content itself also has a div tag, so you need to use it at this time.
Menu nesting is false, content nesting is true, and content labels will be automatically judged. Most of the time this is enough<br>
The judgment method is to determine that the first tag after gettingElementsByTagName is the first item of content, and the rest are judged by the depth of this first item<br>
But in some cases, this still doesn't work<br>
I use the last 2 parameters as id to specify the first item of the menu or content nesting = [false,true,"","q2"];<br>
This will definitely not be wrong (if you don’t understand, it will be much easier to see the following example)<br><br>
<strong> = 0;</strong><br>
The number of tabs displayed by default, the serial number starts from 0<br><br>
<strong> = ["c1","c2","c3"]</strong><br>
className of the style loaded by menu:<br>
The className not selected on the menu is c1<br>
The className selected in the menu is c2<br>
The className of the menu onmouseover is c3<br><br>
<strong> = false;</strong><br>
Does the tab have onmouseover, onmouseout transform style event [non-activated tab content], and the corresponding style is style[2]<br><br>
<strong> = false;</strong><br>
Whether the tab content is used onmouseover, onmouseout is activated directly<br><br>
<strong> = false;</strong><br>
Tabs are menu type<br><br>
<strong> = [false, 1000];</strong><br>
Whether the tabs are played automatically, playback speed (milliseconds)<br><br>
<strong>();</strong><br>
Start generating tabs. If you need to trigger the event onclick, you can (function name)<br>
All will trigger
</p>
</div>
<div class="s">
<!--In the default onclick, the first example-->
<div >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div >
<div>This example is triggered with onclick<br> and set overStyle = true;<br>(over, out changes the style, but does not activate)</div>
<div>
var bba = new opCard();<br>
= ["a2","li","b2","div"];<br>
= ["style1","style2","style1"];<br>
= true;<br>
();<br>
bba = null;
</div>
<div>33333</div>
<div>4444444</div>
</div><br>
<!--The default onclick, the second example-->
<div >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li skip="true">4</li>
</ul>
</div>
<div >
<div>
This example is to add skip="true" than above<br>i.e.<li skip="true">4</li><br>So tab 4 has no content<br>
You can directly add links to the text of the tab, I won't add it here
</div>
<div>222222</div>
<div>33333</div>
<div>4444444</div>
</div>
</div>
<div class="s">
<!-- Example in onmousover trigger-->
<div >
<ul>
<li>1</li>
<li>2</li>
<li skip="true">3</li>
<li>4</li>
</ul>
</div>
<div >
<div>This example is triggered with onmouseover<br>(over, out is activated directly)<br>and<li skip="true">3</li>[Tab 3 will not be activated]<br>overStyle = true;</div>
<div>
var cc = new opCard();<br>
= ["a4","li","b4","div"];<br>
= ["style1","style2","style1"];<br>
= true;<br>
= true;<br>
();<br>
cc = null;
</div>
<div>33333</div>
<div>4444444</div>
</div>
</div>
<div class="s">
<!--Auto-play auto first example-->
<div >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div >
<div>1111111<br>I switch one tab every 3 seconds</div>
<div>
var ee = new opCard();<br>
= ["a6","li","b6","div"];<br>
= ["style1","style2","style1"];<br>
= [true, 2000];<br>
= true;<br>
();<br>
ee = null;
</div>
<div>33333<br>I switch one tab every 3 seconds</div>
<div>44444444<br>I switch one tab every 3 seconds</div>
</div>
Note: <strong>The mouse will stop playing anywhere in the tab</strong><br><br>The following is combined with overChange</div>
<!--Auto-play auto second example-->
<div >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div >
<div>1111111<br>I switch a tab every 2 seconds</div>
<div>
var dd = new opCard();<br>
= ["a5","li","b5","div"];<br>
= ["style1","style2","style1"];<br>
= [true, 3000];<br>
();<br>
dd = null;<br>
</div>
<div>33333<br>I switch a tab every 2 seconds</div>
<div>44444444<br>I switch one tab every 2 seconds</div>
</div>
<div><br>After this one<li skip="true">3</li>, and overStyle=true;</div>
<!--The third example of autoplaying auto-->
<div >
<ul>
<li>1</li>
<li>2</li>
<li skip="true">3</li>
<li>4</li>
</ul>
</div>
<div >
<div>1111111<br>I switch one tab every 1 second</div>
<div>
var ff = new opCard();<br>
= ["a7","li","b7","div"];<br>
= ["style1","style2","style1"];<br>
= [true, 1000];<br>
= true;<br>
= true;<br>
();<br>
ff = null;
</div>
<div>33333<br>I switch one tab every 1 second</div>
<div>44444444<br>I switch one tab every 1 second</div>
</div>
</div>
<!--Example of menu navigation-->
<div class="s">
<div >
<ul>
<li skip="true">Home </li>
<li>News</li>
<li>Forum</li>
<li skip="true">Contact Us</li>
</ul>
</div>
<div >
<div></div>
<div><a href="#">Domestic News</a><a href="#">International News</a><a href="#">Entertainment News</a><a href="#">Sports News</a></div>
<div><a href="#">Blue Idea</a><a href="#">blue idea</a></div>
<div></div>
</div>
<div><strong>Note: The menu is closed for one second delay</strong><br>This is just a demonstration, and you can actually set position or something. -o-<br>I don't know if the multi-level menu can be supported, I haven't tried it</div>
</div>
<div class="s">
Many tabs I have seen cannot be used for nesting<br>But it is still used sometimes<br>
So as you can see, this demonstration itself is a nesting and the effect is pretty good
</div>
<!--Other applications-->
<div class="s">
For example, what to switch pictures, but I am too lazy to write. . . <br>
I don’t know what this can do. .
<div >
<li>Happy New Year</li>
<li>New Year is coming soon</li>
<li>It's so cold</li>
<li>Everyone grab the red envelope</li>
<li>Red envelope~! Red envelope ~! Where are you? </li>
</div>
</div>
<div class="s">
The tab title (or menu) must be the same as the tab content, otherwise an error will occur <br>Even if the tab menu skip="true", the content must be placed in an empty tag to occupy the placeholder<br>
Nothing else seems to have been found yet<br><br>
I originally planned to join ajax, but some of them have not yet been considered. <br>
In terms of efficiency, it should be OK. I put a few tabs on this demonstration, and it seems to be pretty good<br><br>
The purpose of writing this is to make tabs in the future and just process the style. Many tabs or switches are similar<br>
I originally planned to get some special effects in it, but I considered adding a lot of code, so I won't add it, just be more concise. <br><br>
Oh, and there are additional styles for the tabs, which will not cancel the original styles.
If the underline on the left is the original style
</div>
<div class="s">Nothing 1</div>
<div class="s">Nothing 2</div>
<div class="s">Nothing 3</div>
<div class="s">Nothing 4</div>
</td>
</tr>
</table>
</body>
</html>