Question

What am i doing wrong here.. I’m trying to display the called sub div through js and css after clicking the links.
But it wont change at all.

Here is my code:

HTML:

<div id="container">

    <div id="sub1">content 1</div>
    <div id="sub2" class="hide">content 2</div>
    <div id="sub3" class="hide">content 3</div>

    <div id="navigation">
        <a href="#" class="mininav" onclick="switchContent('sub1'); return false;">link 1</a>
        <a href="#" class="mininav" onclick="switchContent('sub2'); return false;">link 2</a>
        <a href="#" class="mininav" onclick="switchContent('sub3'); return false;">link 3</a>
    </div>

</div>

JS:

function switchContent(obj) {

        obj = (!obj) ? 'sub1' : obj;

        var contentDivs = document.getElementById('container').getElementsByTagName('div');
        for (i=0; i<contentDivs.length; i++) {
            if (contentDivs[i].id && contentDivs[i].id.indexOf('sub') != -1) {
                contentDivs[i].className = 'hide';
            }
        }
        document.getElementById(obj).className = '';

    }

CSS:

.hide {
    display: none;
}

Answer 1

Try putting your javascript code before your html code, so the onclick function of your html code can find the switchContent() function.