jQuery Forum

I have a vertical menu (100% css) where the click events are driven by jquery.  On the items that have no submenus, the menu works good.  But on items that have submenus and when the user clicks on one of the submenu items, the content loads into the specified div but then the old content comes back into view.

Here is the code:

1. $('#vmenu li').on("click", function(event) {
2.         var itemVar = $(this).attr('class');
3.         event.preventDefault();
4.        
5.         switch(itemVar) {
6.             case 'mainHome' : $('#content').empty().load('indexContent.html'); break;
7.             case 'classroom' : $('#content').empty().load('classroom.html'); break;
8.             case 'dlTrng' : $('#content').empty().load('online.html'); break;
9.             case 'mobileApp' : $('#content').empty().load('mobileApp.html'); break;
10.             case 'crseCat' : $('#content').empty().load('crseCat.html'); break;
11.             case 'internTrng' : $('#content').empty().load('onboard.html'); break;
12.             case 'dacOrg' : $('#content').empty().load('DACorg.html'); break;
13.             case 'baseAct' : $('#content').empty().load('BASEactivity.html'); break;
14.             ....
15.             };
16. });

For example, a user uses the left navigation menu to nav: "Intern On-boarding -> Program Requirements -> Who Joins?" firebug shows that the file "onboard.html" is being pulled in and put in the content div.  But according to my operations.js, "whoJoins.html" should be pulled in and displayed in the content div. "onboard.html" is the correct file if someone would be clicking on the Intern Onboarding menu item and not any submenu item.


Any insight would be helpful.  I am using jQuery 1.7.1, xhtml1.0 (strict) and targeting IE8 and IE9. But I am trying to keep it so that it works in Chrome and FF11.
Here is the testing location to see what it is doing. 

Tony
It is not the job you get handed, but what you have done with it in the end that people remember.