Question

for a website I use tabs with 9 different looks, these are used in different situations. It all works fine but I use a lot of functions with path’s and statements that could be a lot shorter I think. An example:

function tabAon() {
    tabAvoor=tabAvoor+1;
    tabDrawer=tabDrawer+1;
    tabBvoor=0;
    tabCvoor=0;
    window.document.getElementById("tabA").style.textDecoration="none"; 
    window.document.getElementById("tabB").style.backgroundPosition="-87px -228px";
    window.document.getElementById("tabB").style.color="#898f92";
    window.document.getElementById("tabC").style.backgroundPosition="-190px -228px";
    window.document.getElementById("tabC").style.color="#898f92";
    window.document.getElementById("tabA").style.cursor="pointer";
    if (tabDrawer==0) {
        window.document.getElementById("header").MozTransform="translateY(0px)";
        window.document.getElementById("header").msTransform="translateY(0px)";
        window.document.getElementById("header").OTransform="translateY(0px)";
        window.document.getElementById("header").WebkitTransform="translateY(0px)";
        window.document.getElementById("header").transform="translateY(0px)";
        window.document.getElementById("tabA").style.color="#898f92";
        window.document.getElementById("tabA").style.backgroundPosition="0px 0px";
    }
    if (tabDrawer==1) {
        window.document.getElementById("header").style.MozTransform="translateY(36px)";
        window.document.getElementById("header").style.msTransform="translateY(36px)";
        window.document.getElementById("header").style.OTransform="translateY(36px)";
        window.document.getElementById("header").style.WebkitTransform="translateY(36px)";
        window.document.getElementById("header").style.transform="translateY(36px)";
        window.document.getElementById("tabAout").style.visibility="visible";
        window.document.getElementById("tabBout").style.visibility="hidden";
        window.document.getElementById("tabCout").style.visibility="hidden";
        window.document.getElementById("tabA").style.color="#000000";
        window.document.getElementById("tabA").style.backgroundPosition="0px -114px";
    }
    if (tabAvoor==2) tabAvoor=1;
    if (tabDrawer==2 && tabBvoor==0 && tabCvoor==0) tabDrawer=0;
    if (tabDrawer==2 && tabBvoor==1 || tabCvoor==1) tabDrawer=1;
}

Answer 1

You can shorten your code a little by defining a variable for your different IDs:

var tabA = window.document.getElementById("tabA");
// window.document.getElementById("tabA").style.textDecoration="none";
tabA.style.textDecoration="none";