Single page dynamic content replacement site - how to individually highlight current content links?

Question

I have a single page site and when I click on the menu the content is replaced via jquery. Though the items are not linking to different pages, just different divs, I want to have the menu act like a regular website menu with 3 states of activity: inactive, hover, and 'current content' (like current/active page but it won't actually link to another page).

I want each individual link to match it's hover color when clicked on and in it's 'current content' state. (Right now I only have a jquery piece that turns any 'current' link red...I want more control if possible) I hope this makes sense...code below!

HTML

<div id="sidebar">
    <nav>
    <ul id="nav">
        <li id="home"><a id="showdiv1">Home</a></li>
        <li id="about"><a id="showdiv2">About</a></li>
        <li id="demoReel"><a id="showdiv3">Demo Reel</a></li>
        <li id="contact"><a id="showdiv4">Contact</a></li>
    </ul><!-- /#nav -->
    </nav>
</div><!-- /#sidebar -->

<div id="content">
        <div id="div1">Blah blah!</div>
        <div id="div2" style="display:none;">Blardy blah!</div>
        <div id="div3" style="display:none;">Moo!</div>
        <div id="div4" style="display:none;">Shmeee!</div>
</div><!-- /#content -->

CSS

#sidebar {
float:right;
width:30%;
}

    ul#nav li#home a:hover { color:red;}

    ul#nav li#about a:hover { color:green; }

    ul#nav li#demoReel a:hover { color:blue; }

    ul#nav li#contact a:hover { color:yellow; }

    .active a { color:red; }

#content {
    float:left;
    width:60%;
}

Jquery

$(function() {

//Highlight active navigation link
$("ul").delegate("li", "click", function() {
    $(this).addClass("active").siblings().removeClass("active");
});


//Fade-in/hide selected navigation link
$('#showdiv1').click(function() {
    $('div[id^=div]').hide();
    $('#div1').fadeIn();
});
$('#showdiv2').click(function() {
    $('div[id^=div]').hide();
    $('#div2').fadeIn();
});

$('#showdiv3').click(function() {
    $('div[id^=div]').hide();
    $('#div3').fadeIn();
});

$('#showdiv4').click(function() {
    $('div[id^=div]').hide();
    $('#div4').fadeIn();
});

})

I would like to note that I am VERY new to this stuff and entirely self taught so please forgive the errors. More importantly, thank you so much in advance for your help!!!

score 2 · Answer 1 · answered Oct 22 '12 at 01:39

Instead of just

.active a { color:red; }

try replacing

ul#nav li#home a:hover { color:red;}
ul#nav li#about a:hover { color:green; }
ul#nav li#demoReel a:hover { color:blue; }
ul#nav li#contact a:hover { color:yellow; }

with

ul#nav li#home a:hover, ul#nav li#home.active a { color:red;}
ul#nav li#about a:hover, ul#nav li#about.active a { color:green; }
ul#nav li#demoReel a:hover, ul#nav li#demoReel.active a { color:blue; }
ul#nav li#contact a:hover, ul#nav li#contact.active a { color:yellow; }

This way, each link gets its special color when it's hovered or when its parent is "active".

Single page dynamic content replacement site - how to individually highlight current content links?

1 Answers1