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! :-)
