hide show div using nav html5 query javascript

Question

I've been reading lots of the other posts, and no doubt it's my inexperience with jQuery that is giving me trouble, but there are lots of things close to what I'm trying to accomplish.

I have a div where I have a vertical navigation set of buttons.

Inside that I want the other divs (child divs) that will be shown or hidden based on the navigation button clicked by the user.

I want all of these divs to be in the same location on the screen...so, basically like a tabbed form but with vertical navigation.

I can't really figure out how best to implement the hiding and showing of each div when it's button is clicked vs. another div's button.

Here's the Navigation html I have

<div id="lowerDetail">
    <div id="lowersectionmenu">
          <ul>
        <li><a href="#Notes" title="Notes">Notes</a></li>
        <li><a href="#People" title="People">People</a></li>
        <li><a href="#NextTab" title="Next Tab">Next Tab</a></li>
        <li><a href="#LastTab" title="LastTab">Last Tab/a></li>
          </ul>
    </div>

    <div id="Notes">
        <form>
        <input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="100" />
        <button type="submit" class="noteEntryButton" id="sendNote" value="Submit" class="buttonAddNote">Submit Note</button>

        </form>

    </div>

    <div id="People">
        <form>
        <input type="text" name="addName" id="addName" placeholder="Name" size="35" />
        <input type="text" name="addPhone" id="addPhone" placeholde="XXX-XXX-XXXX" size="15" />

        </form>

    </div>

<div id="NextTab">Next Tab </div>
<div id="LastTab">Last Tab </div>

    </div>

This is pretty basic I know, but here's the CSS for that as well.

   #lowersectionmenu {
    float:left;
    width: 120px;
    border-style: solid solid none solid;
    border-color: #94AA74;
    border-size: 1px;
    border-width: 1px;
    margin: 10px;
}

#lowersectionmenu li a {
    height: 32px;
    voice-family: "\"}\""; 
    voice-family: inherit;
    height: 24px;
    text-decoration: none;
}   

#lowersectionmenu li a:link, #lowersectionmenu li a:visited {
    color: #5E7830;
    display: block;
    background: url(images/menu1.png);
    padding: 8px 0 0 10px;
}

#lowersectionmenu li a:hover {
    color: #26370A;
    background: url(images/menu1.png) 0 -32px;
    padding: 8px 0 0 10px;
}

#lowersectionmenu li a:active {
    color: #26370A;
    background: url(images/menu1.png) 0 -64px;
    padding: 8px 0 0 10px;
}
#lowersectionmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.noteEntryField {
    position:relative;
    top:20px;
    }

    .noteEntryButton {
        position:relative;
        top:20px;
        height:27px;
        outline:none;
        text-align:center;
        background: #66ff33;
        background: -webkit-gradient(linear, left top, left bottom, from(#66cc33), to(#669933));
        background: -moz-linear-gradient(top,  #66cc33,  #669933);
        font-size:14px;
        border-radius:4px;
        color:#606060;
        text-shadow:2px 2px 2px #f0f0f0;
        }

Now I just need some appropriate jQuery code to make the magic happen.

I appreciate any and all help.

I'm adding the jQuery given as an answer, but still no luck. Maybe someone can tell me what's wrong. All divs are visible, and the form fields are stacked...regardless of what I do.

<script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $('#lowersectionmenu a').click(function() {

            /* hide any previous active nav and remove activeClass, fails quietly if none found*/    
            $('.navActive').hide().removeClass('navActive');

            /* create ID selector from this link */
            var id = $(this).attr('href') /* or using native script   this.href*/
            /* will return string "#Notes" which is exactly the same as ID selector string for jQuery*/

            /* show proper item and add active class used to find open element above*/
            $(id).show().addClass('navActive');

            return false; /* prevent browser default events for anchor tag */   

        });
        </script>

Answer 1

Following should work

$('#lowersectionmenu a').click(function() {

    /* hide any previous active nav and remove activeClass, fails quietly if none found*/    
    $('.navActive').hide().removeClass('navActive');

    /* create ID selector from this link */
    var id = $(this).attr('href') /* or using native script   this.href*/
    /* will return string "#Notes" which is exactly the same as ID selector string for jQuery*/

    /* show proper item and add active class used to find open element above*/
    $(id).show().addClass('navActive');

    return false; /* prevent browser default events for anchor tag */   

});

DEMO: http://jsfiddle.net/LzmuB/1/

The toggling of an active class is a very common methodology so the currently active item can be quickly found and deactivated