Optimizing a tab switcher script

[PaulVS]

Hi all,

I am a beginner with Javascript and i am trying to make a simple script to switch tabs with use of classes because im much better in styles.

My javascript is:

]function switchClassName(obj,fromClass,toClass){
    var stringClass = obj.className;
    if (stringClass.match(fromClass)) {
        stringClass = stringClass.replace(fromClass,toClass);
        obj.className = stringClass;
    }
    else {
        stringClass = stringClass.replace(toClass,fromClass);
        obj.className = stringClass;
    }
}
 
function tabSwitcher(obj) {
    var tabCount = document.getElementById('tabSet').getElementsByTagName('a');
    var contentCount = document.getElementById('contentSet').getElementsByTagName('div');
    for (var i = 0; i < tabCount.length; i++) {
        (tabCount[i].className = '' )
    }
    switchClassName(obj,'current','');
    for (var j = 0; j < tabCount.length; j++) {
        if ((tabCount[j].className) == 'current') {
            currentCount = j
        }
    }
    for (k = 0; k < contentCount.length; k++) {
        contentCount[k].className = 'off'
    }
    contentCount[currentCount].className = 'on'
}

My CSS is:

.on { display: block; }
.off { display: none; }
.current { background-color: silver; }

and my HTML is:

<ul id="tabSet">
    <li><a href="#" onclick="tabSwitcher(this);">tab 1</a></li>
    <li><a href="#" onclick="tabSwitcher(this);">tab 2</a></li>
    <li><a href="#" onclick="tabSwitcher(this);">tab 3</a></li>
</ul>
<div id="contentSet">
    <div class="on">Content 1</div>
    <div class="off">Content 2</div>
    <div class="off">Content 3</div>
</div>

It does work but it feels like the script can be much smaller. Can someone help with it please?

Thank you

Greetings,

Paul

[acoder]

Welcome to TSDN!

Two possible modifications:

1. Instead of switching classes, you could just set the style.display property to "none" or "block", e.g.

   obj.style.display="block";

2. Instead of two for loops, have one for loop and check for the tab className. If it equals "current", then set the content to "on", otherwise to "off"

[PaulVS]

Thank you for your reply i will work on it :)