CODEWITHSUNDEEP
javascriptjquerycsshtml
Matt Meadows
Matt Meadows

Reputation: 157

style a navigation link when a particular div is shown

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:The effect I'm After:

Upvotes: 0

Views: 223

Answers (1)

vladkras
vladkras

Reputation: 17228

You can modify your script like this:

$('#compositingWork').click(function(){
        $(this).addClass('active');
        $('#portfolioWork').load('portfolioContent.html #PortfolioCompositing');
    });

and add this to css:

.active
{
background: url("Images/Nav_Underline.png") repeat-x;
background-position: center bottom;
}

upd. but the easier way is to combine similar strings:

$(document).ready(function() {
    // bind link id and id for load()
    var loadDiv = {
        '3DWork': 'Portfolio3D',
        'GFXWork': 'motionGraphics',
        'compositingWork': 'PortfolioCompositing',
        'animationWork': 'PortfolioAnimation'
    };
    var links = $('#3DWork, #GFXWork, #compositingWork, #animationWork');
    links.click(function(e) {
        e.preventDefault();
        // remove effect from all links
        links.parent('li').removeClass('active');
        // and add to clicked one
        $(this).parent('li').addClass('active');
        // load you contant using array of ids
        $('#portfolioWork').load('portfolioContent.html #'+loadDiv[this.id]);
    });
});

also I don't think you need an image for this effect. Why not using border-botom style with width and color you need?

check this example http://jsfiddle.net/vladkras/sJNMR/ (I also added "prevent default" action for your need)

Upvotes: 1

Related Questions