View Single Post
Old 12-03-2012, 10:54 PM   PM User | #2
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,248
Thanks: 59
Thanked 3,999 Times in 3,968 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
HTML/CSS question. Nothing really to do with JS.

But let's simplify the JS and modernize the HTML while we are at it, at least a bit:

Code:
<style type="text/css">
#content1 { display: block; }
#content2, #content3, #content4 { display: none; }
</style>

<script>
function showHide(d)
{
    for (var i = 1; i < 99999; ++i )
    {
        var div = document.getElementById("content" + i );
        if ( div == null ) break; // no more to do
        div.style.display = ( d == i ) ? "block" : "none";
    }
    return false; // to cancel the action of the <a> tag!
}
</script>

<a href="#" onclick="return showHide(1);">link1</a>
<a href="#" onclick="return showHide(2);">link2</a>
<a href="#" onclick="return showHide(3);">link3</a>
<a href="#" onclick="return showHide(4);">link4</a>

<div id="content1">Default content</div>
<div id="content2">2nd item</div>
<div id="content3">3rd item</div>
<div id="content4">4th item</div>
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote