Should be an easy one

Should be an easy one

I'm very new to jQuery, new to developing actually, I'm a designer heading down that road, and jQuery seems to be the best place to start.

I'm using jQuery to swap content on a page via the addClass and removeClass technique. Everything seems to work fine when I test locally but I just need to fill in some gaps.

Here is a stripped down version of the jQuery:

$(document).ready(function() {
$('.mbbA').click(function() {
$('#mainBoxA').removeClass('hide');
$('#mainBoxB').addClass('hide');
});
$('.mbbB').click(function() {
$('#mainBoxA').addClass('hide');
$('#mainBoxB').removeClass('hide');
});
});

And a stripped down version of the HTML:

<div id="mainBoxA" class="hide">
<ul class="mainBoxNav">
<li><a href="#" class="mbbB">Text</a></li>
</ul></div>
<div id="mainBoxB" class="hide">
<ul class="mainBoxNav">
<li><a href="#" class="mbbA">Text</a></li>
</ul></div>

My question is, do I need to replace the # as the link target with something specific in jQuery? The # usually reloads the page but I don't want this to happen.

Sorry if this seems like a stupid question!

Kind Regards. Chris.