Javascript uses arrays to implement tab menu switching effect _ navigation menu

Recently I wrote a tab menu, which is also a product of Web. It has no technical skills. for more information, see the recently written tab menu. This is a product of Web. It has no technical skills.

The following is the html structure of the tab menu.:

Vhcdsdfd ..........................

Tab1, tab2 is the content, and blank is filled with the rest. body is the content corresponding to the tab.

The following is the javascript code:

The Code is as follows:

Sx. activex. tabmenu = {
Create: function (t ){
Var a = document. createElement ("p ");
Var head = document. createElement ("p ");
Var body = document. createElement ("p ");
Var blank = document. createElement ("span ");
A. style. height = "200px ";
A. style. width = "300px ";
// A. style. border = "1px red solid ";
Head. style. height = "15% ";
// Head. style. overflow = "hidden ";
Head. style. width = "100% ";
Blank. style. width = 100-20 * t. length + "% ";
Blank. style. height = "100% ";
Blank. style. borderBottom = "1px red solid ";
Blank. style. lineHeight = parseInt (a. style. height) * 0.15 + "px ";;
Body. innerHTML = t [0] [1];
Body. style. height = "85% ";
Body. style. padding = "10px ";
Body. style. border = "1px red solid ";
Body. style. borderTop = "0px ";
For (var I = 0; I Var tab = document. createElement ("span ");
Tab. style. border = "1px red solid ";
Tab. style. width = "20% ";
Tab. style. lineHeight = parseInt (a. style. height) * 0.15 + "px ";
Tab. style. textAlign = "center ";
Tab. style. height = "100% ";
Tab. style. backgroundColor = "yellow ";
Tab. style. cursor = "hand ";
Tab. innerHTML = t [I] [0];
Tab. onclick = function (r ){
Return function (){
For (var i1 in head. all ){
If (head. all [i1]! = This & head. all [i1]. tagName = "SPAN ")
Head. all [i1]. style. borderBottom = "1px red solid ";
This. style. borderBottom = "0px ";

}
Body. innerHTML = t [r] [1];
}
} (I );
Head. appendChild (tab );;
}
Head. firstChild. style. borderBottom = "0px ";
Head. appendChild (blank );
A. appendChild (head );
A. appendChild (body );
Return;
}
}

The input parameter t is a two-dimensional array in the form of a tag question and TAG content. The call method is as follows:

The Code is as follows:

Untitled Document