A simple jQuery Question

[ChrisBolton]

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 there is one thing I'm just not sure about.

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? I don't want the page to reload or the link to do anything other than change the content in question.

Sorry if this seems like a stupid question!

Kind Regards. Chris.

[Fotiman]

jQuery will pass the event as a parameter to your function, which you can then stop. For example:

$('.mbbA').click(function(e) { 
  e.stopPropagation(); 
  $('#mainBoxA').removeClass('hide'); 
  $('#mainBoxB').addClass('hide'); 
});