I have JQuery working to show a particular div when a certain link is clicked. I have managed to apply the effect I'm after with the main navigation bar through id'ing the body tag and using css to style when the id is found.

However, i'd like to apply the same effect to the sub navigation when a certain div is present.

How the main navigation is styled:

HTML:

<nav>
<ul>
<li id="nav-home"><a href="index.html">Home</a></li>
<li id="nav-showreel"><a href="showreel.html">Showreel</a></li>
<li id="nav-portfolio"><a href="portfolio.html">Portfolio</a></li>
<li>Contact</li>
</ul>
</nav>

CSS:

body#home li#nav-home, 
body#portfolio li#nav-portfolio
{
background: url("Images/Nav_Underline.png") no-repeat;
background-position: center bottom;
color: white;
}

(Other links havent been added to styling as those pages are still in development)

How the sub navigation is structured:

<nav id="portfolioNav">
<ul>
<li id="portfolio-compositing"><a id="compositingWork" href="#">Compositing</a></li>
<li id="portfolio-animation"><a id="animationWork" href="#">Animation</a></li>
<li id="portfolio-motionGfx"><a id="GFXWork" href="#">Motion Graphics</a></li>
<li id="portfolio-3D"><a id="3DWork" href="#">3D</a></li>
</ul>
</nav>

As you can see, its similar format to the main navigation, however i've tried the same approach and it doesn't work :(

The Javascript that switches the divs on the navigation click:

<script type="text/javascript">

$(document).ready(function() {

$('#3DWork').click(function(){

    $('#portfolioWork').load('portfolioContent.html #Portfolio3D');
});

$('#GFXWork').click(function(){

    $('#portfolioWork').load('portfolioContent.html #motionGraphics');
});

$('#compositingWork').click(function(){

    $('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
});
$('#animationWork').click(function(){

    $('#portfolioWork').load('portfolioContent.html #PortfolioAnimation');
});

});
</script>

JSFiddle for full HTML & CSS : JSFiddle File

The effect I'm After: