JQuery Simple Nav problem

[RipzCurlz]

Hey,

Sorry i don't have a live example to show u,
but ill do my best to explain my problem.

Full JQuery code:


$(document).ready(function(){
$('#mainDiv').load("Home.html");
$('li.home').click(function() {
$('#mainDiv').load("Home.html");
});
$('li.about').click(function() {
$('#mainDiv').load("About.html");
});
$('li.products').click(function() {
$('#mainDiv').load("Products.html");
});
$('li.tech').click(function() {
$('#mainDiv').load("Technical.html");
});
$('li.palette').click(function() {
$('#mainDiv').load("Palette.html");
});
$('li.contact').click(function() {
$('#mainDiv').load("Contact.html");
});
$('.palettebtn').click(function() {
$('#mainDiv').load("Palette.html");
});

});

Html Element code:


<a href="#" class="palettebtn">
<img src="images/Palette.png" width="200" height="200" alt="Palette" border="0"/>
</a>

The part of the code im having trouble with:


$('.palettebtn').click(function() {
$('#mainDiv').load("Palette.html");
});

This code used to work fine,
I have looked over it several times and havnt spotted the problem yet.

When i open the web page with the element on my local pc
and when the .palettebtn image is clicked, it sends the user to the top of the screen.
Where it should load "Palette.html" into #mainDiv

I hope i have given enough info
Any input would be appreciated

Thanks

[rangana]

You can choose from either of these two:



$('.palettebtn').click(function() {
$('#mainDiv').load("Palette.html");
return false;
});



$('.palettebtn').click(function(event) {
$('#mainDiv').load("Palette.html");
event.preventDefault();
});



Basically, you just need to cancel the (natural) action of the a tags.

[RipzCurlz]

Thank you very much for your reply
and i have sent you an email with more info :)