jQuery Links to Show/Hide Divs

show hide divs based on link click; show jquery object properties.

by nickadeemus2002

HTML

<div class="container">
    <div class="nav">
        <ul id="menu">
            <li id="link1"><a href="#">See Topic One</a></li>
            <li id="link2"><a href="#">See Topic Two</a></li>
            <li id="link3"><a href="#">See Topic Three</a></li>   
        </ul>
    </div>
    <div class="main">
        <div id="page1" class="content">
            <h1>Topic One: Kickoff</h1>
            <p>Hey, here is Topic One content.</p>
        </div>
        <div id="page2" class="content">
            <h1>Topic Two: Working</h1>        
            <p>And now content for Topic 2</p>
        </div>
        <div id="page3" class="content">        
            <h1>Topic Three: Fin</h1>
            <p>Content for Topic Three is here.</p>
        </div>                 
    </div>
    <div id="object_output"></div>
</div>

CSS

p.codeConsole{
    background-color:#585858;
    color:#fff;
}

JavaScript

$('#menu a').click(function(e) {
    hideContentDivs();
    var tmp_div = $(this).parent().index();
    var needed_link = $('.main div').eq(tmp_div);
/*
    for (var key in needed_link) {
        var obj = needed_link[key];
        for (var prop in obj) {
            //alert(prop + " = " + obj[prop]);
            var object_property = prop + " = " + obj[prop];
            $('div#object_output').append('<p class="codeConsole">' + object_property + '</p>');
        }
    }
*/

    $('.main div').eq(tmp_div).show();
});

function hideContentDivs() {
    $('.main div').each(function() {
        $(this).hide();
    });
    //$('div#object_output').html('');
}
hideContentDivs();