Need Simplest Ajax

[aspiring_ajaxer]

Hello all, I'm new to JavaScript and jQuery although I have been
learning for a couple of weeks now but still can't wrap my head around
the programming this kind of stuff... I'll basically post my HTML
below and explain to you what I need and where I am stuck. Thank you
for reading!

Okay, So I have a basic index.html here:

<div id="navigation">

     <a class="current" id="index" title="Home" >Home</a>
     <a href="contact.html" id="contact" title="Contact">Contact</a>
     <a href="#" id="Misc" title="Misc">Misc Additional Nav Link</a>

</div><!-- </navigation> -->

<div id="content">

     This is my content

</div><!-- </content> -->

Here is what I want:

Since I am on the homepage, the link is inactive through the use of
the current class and of course without a href, however, when someone
would click on Contact, jquery would load the content and insert it
into the content div and update the navigation to show the following
inside it:

<a href="index.html"  id="index" title="Home" >Home</a>
<a class="current"  id="contact" title="Contact">Contact</a>
<a href="#" id="Misc" title="Misc">Misc Additional Nav Link</a>

Here's the script:

$(document).ready(function() {
  $('#contact').click(function() {
    $('#content').load('contact.html');
        return false;
        $('#navigation').text("Hello! What do I do here?");
  });
});

I have contemplated putting the whole navigation inside the 'text'
function with my desired changes for /each/ navigation item but my gut
feeling is that it's stupid and redundant to do so and there has to be
a better way for it...Perhaps a loop or something calling the variable
clicked on like e.currentTarget in ActionScript 3? I appreciate you
taking the time for reading my jquery adventure and hope you can help
me out.

Cheers! :-)

[Jack Killpatrick]

I think this will work for you. It uses jquery's data function:
http://docs.jquery.com/Internals/jQuery.data

    <style type="text/css">
        .current { font-weight:bold };
    </style>

    <script type="text/javascript">
        $(function() {
            $('#nav a').each(function(i,o){ // loop over each of the nav
links
                $.data(this, 'href', o.href); // stuff the href into
$.data for use later
                $(this).attr('href', '#').click(function(){ // replace
the original href with #, add a click handler
                    // when clicked, this happens
                    $('#nav a').removeClass('current'); // remove the
current class from all nav links
                    $('#content').load($.data(this, 'href')); // load
the content div using the href from $.data
                    $(this).addClass('current'); // add the current
class to the current nav link
                    return false;
                });
            });
        });
    </script>

<div id="nav">
    <a href="page1.html" id="page1">Page1</a>
    <a href="page2.html" id="page2">Page2</a>
    <a href="page3.html" id="page3">Page3</a>
</div>

<div id="content"></div>

- Jack

aspiring_ajaxer wrote:

> Hello all, I'm new to JavaScript and jQuery although I have been
> learning for a couple of weeks now but still can't wrap my head around
> the programming this kind of stuff... I'll basically post my HTML
> below and explain to you what I need and where I am stuck. Thank you
> for reading!
>
> Okay, So I have a basic index.html here:
>
> <div id="navigation">
>
>      <a class="current" id="index" title="Home" >Home</a>
>      <a href="contact.html" id="contact" title="Contact">Contact</a>
>      <a href="#" id="Misc" title="Misc">Misc Additional Nav Link</a>
>
> </div><!-- </navigation> -->
>
> <div id="content">
>
>      This is my content
>
> </div><!-- </content> -->
>
> Here is what I want:
>
> Since I am on the homepage, the link is inactive through the use of
> the current class and of course without a href, however, when someone
> would click on Contact, jquery would load the content and insert it
> into the content div and update the navigation to show the following
> inside it:
>
> <a href="index.html"  id="index" title="Home" >Home</a>
> <a class="current"  id="contact" title="Contact">Contact</a>
> <a href="#" id="Misc" title="Misc">Misc Additional Nav Link</a>
>
> Here's the script:
>
> $(document).ready(function() {
>   $('#contact').click(function() {
>     $('#content').load('contact.html');
> return false;
> $('#navigation').text("Hello! What do I do here?");
>   });
> });
>
> I have contemplated putting the whole navigation inside the 'text'
> function with my desired changes for /each/ navigation item but my gut
> feeling is that it's stupid and redundant to do so and there has to be
> a better way for it...Perhaps a loop or something calling the variable
> clicked on like e.currentTarget in ActionScript 3? I appreciate you
> taking the time for reading my jquery adventure and hope you can help
> me out.
>
> Cheers! :-)
>
>
>