Here I converted my previous classic JS tab design to OOP design. The javascript tab object uses pure javascript without any CSS. I understand CSS is more efficient but here just makes it easy for initiatation. Of course, it's very convinient to convert JSON styling data to CSS if you need to seperate style from javascript.

Tabs on the top and bottom share the same script. You only need to change some input data to customize your need. The size of the script is just 6KB (not compressed). Let's see how it works.

Tabs on the Top of Content Box

Only 2 lines of code to start the tabs. Set position: "t", tabs will be on the top of content box.

var tab1 = new pgtab();
tab1.init({
    id: "tabco1",
    eventType: "mouseover",
    position: "t",
    content: {
        width: "400px",
        height:"150px",
        backgroundColor: "#dff"
    },
    listyle: {
        paddingLeft: "0px",
        backgroundColor: "red",
        marginRight: "5px"
    },
    astyle: {
        width:"40px",
        height:"20px",
        backgroundColor: "#dff",
        padding: "5px 10px"
    },
    activetab: 1
 });

Tabs on the Bottom of Content Box

Set position: "b", tabs will be on the bottom of content box. eventType: "click" means you have to click the tab to change the active tab. listyle: { marginRight: "0px"} sets the gap between the tabs 0px.

var tab2 = new pgtab();
tab2.init({
    id: "tabco2",
    border:"#99ffff 1px solid",
    eventType: "click",
    position: "b",
    content: {
        width: "400px",
        height:"150px",
        backgroundColor: "#dff"
    },
    listyle: {
        paddingLeft: "0px",
        backgroundColor: "red",
        marginRight: "0px"
    },
    astyle: {
        width:"40px",
        height:"20px",
        backgroundColor: "#dff",
        padding: "5px 10px"
    },
    activetab: 1
 });

content tab1

content tab2

content tab3

content tab4

content tab5

Attach Event

Set fire: {...} property to attach event for specific tab.

var tab3 = new pgtab();
tab3.init({
    id: "tabco3",
    ...
    ...
    
    activetab: 0,
    fire:{
        2: tab2event, // key is the tab number, starts from 0, value is the attached event
        3: tab3event
    }
 });

function tab2event () {
alert("tab3");
}

function tab3event () {
alert("tab4");
}

content tab1

content tab2

content tab3

content tab4

content tab5

Social Bookmark if the page is useful.