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:
