My website consists of a single page with content that gets replaced using jQuery when the menu is clicked. Even though the links do not lead to different pages, just different divs, I want the menu to behave like a typical website menu with three states: inactive, hover, and 'current content' (similar to an active page but without actually linking to another page).
I aim to have each individual link match its hover color when clicked on and in its 'current content' state. Currently, I only have a jQuery script that turns any 'current' link red...I desire more control if possible. I hope this explanation is clear...see code snippet 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 am completely new to this field and have taught myself everything so far, please excuse any mistakes. Most importantly, thank you very much for your assistance!