如何缩短长重复路径并合并语句

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

What about using a JS framework? Eg: jQuery

Example:

 $('#tabBout').show();

Instead of window.document.getElementById("tabAout").style.visibility="visible";

Answer 2

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";

Answer 3

For a start, you should try using some version of jQuery's super cool "$()" function in order to shorten all those "window.document.getElementById" , ie.:

function $(id)
{
   return window.document.getElementById(id);
}

Then you can just do this:

$("header").style.MozTransform="translateY(36px)";

(btw: there are many other nice things you can do with $(), ie. return entire arrays of objects... the version I've wrote here is just an example)

And you can reduce your code a lot by using some functions, ie.:

function set_transforms(id,pos)
{
   $(id).MozTransform="translateY("+pos+"px)";
   $(id).msTransform="translateY("+pos+"px)";
   $(id).OTransform="translateY("+pos+"px)";
   $(id).WebkitTransform="translateY("+pos+"px)";
   $(id).transform="translateY("+pos+"px)";
}

So you can replace all this:

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)";

with just this:

set_transforms("header",36);

Hope it helps!