Recently wrote a tab menu, this is also a product of web2.0, no technical content, practice practicing just.
The following is the HTML structure of the tab menu:
<div id= "A" ><div id= "head" ><span id= "tab1" >vhc</span><span id= "TaB2" >dsdfd</span >..........................<span id= "blank" ></span></div><div id= "Body" ></div> </div>
The TAB1,TAB2 is the content, the blank is the remainder. The body is the tab label corresponding to the content.
Here's the JavaScript code:
Copy Code code as follows:
sx.activex.tabmenu={
Create:function (t) {
var a=document.createelement ("div");
var head=document.createelement ("div");
var body=document.createelement ("div");
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<t.length;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 A;
}
}
The incoming parameter t is a two-dimensional array, which is the form of a tag topic and the contents of the label, called as follows:
Copy Code code as follows:
<title>untitled document</title>
<body>
<script src= "Kongjian.js" ></script>
<script>
var a=sx.activex.tabmenu.create ([["ASD", "Wewfrwefwe"],["we", "DSFSDFSDF"]]);
Document.body.appendChild (a);
</script>
</body>
Almost finished, interested friends can go to the test.
