How can I modify my jQuery code to achieve the following:
If the 'home page' is active, then apply CSS class A (dark green color) to the 'home link'; otherwise, apply CSS class B (brown color).
(In essence, I want the relevant link to be dark green without a hover effect when on the current page, and for other links to be brown but turn light green when hovered over.)
The current code works perfectly as intended, except for one issue - when clicking on any link, the dark green color does not disappear from the 'home' link. This is due to the CSS rule: #menuDisplayedHome a { color: #568a38; /* Dark Green */ } .... Check it out here: https://jsfiddle.net/mhfn7kw0/2/embedded/result/ (Click on 'about' followed by 'home' to see the slider animation).
Note: all pages are within a jQuery slider, meaning that they are technically on the same page.
Here is the current code:
CSS:
#menuDisplayed a {
text-decoration:none;
color: #8F5C3E; /* Brown */
}
#menuDisplayed a:not(.no-hover):hover {
color:#6bab4a ; /* Light Green */
}
#menuDisplayedHome a {
color: #568a38; /* Dark Green */
}
#menuDisplayed a.no-hover {
color: #568a38; /* Dark Green */
}
HTML:
<div id="wrapper">
<div id="headingLogoBar">
<div id="logoBarImageDiv">
<img id="">
</div>
<div id="menuDisplayed">
<ul>
<li id="menuDisplayedHome"><a href="#target1" class="forMovingPanel">HOME</li>
<li id="menuDisplayedAbout"><a href="#target2" class="forMovingPanel">ABOUT</a></li>
<li id="menuDisplayedPortfolio"><a href="#target3" class="forMovingPanel">PORTFOLIO</a></li>
<li id="menuDisplayedContact"><a href="#target4" class="forMovingPanel">CONTACT</a></li>
</ul>
</div>
</div>
<div class="forMovingPanel active" id="target1" style="left:0; display:block;">
<h3 style="text-align:center">Home</h3>
</div>
<div class="forMovingPanel" id="target2">
<h3 style="text-align:center">About</h3>
</div>
<div class="forMovingPanel" id="target3" >
<h3 style="text-align:center">Portfolio</h3>
</div>
<div class="forMovingPanel" id="target4" >
<h3 style="text-align:center">Contact</h3>
</div>
</div>
jQuery for changing link colors:
<script>
$('#menuDisplayedHome a').on('click', function() {
$(this).addClass('no-hover');
$('#menuDisplayedContact a').removeClass('no-hover');
$('#menuDisplayedPortfolio a').removeClass('no-hover');
$('#menuDisplayedAbout a').removeClass('no-hover');
});
$('#menuDisplayedAbout a').on('click', function() {
$(this).addClass('no-hover');
$('#menuDisplayedContact a').removeClass('no-hover');
$('#menuDisplayedPortfolio a').removeClass('no-hover');
$('#menuDisplayedHome a').removeClass('no-hover');
$('#menuDisplayedHome a').addClass('menuDisplayed a');
});
$('#menuDisplayedContact a').on('click', function() {
$(this).addClass('no-hover');
$('#menuDisplayedAbout a').removeClass('no-hover');
$('#menuDisplayedPortfolio a').removeClass('no-hover');
$('#menuDisplayedHome a').removeClass('no-hover');
$('#menuDisplayedHome a').addClass('menuDisplayed a');
});
$('#menuDisplayedPortfolio a').on('click', function() {
$(this).addClass('no-hover');
$('#menuDisplayedAbout a').removeClass('no-hover');
$('#menuDisplayedContact a').removeClass('no-hover');
$('#menuDisplayedHome a').removeClass('no-hover');
$('#menuDisplayedHome a').addClass('menuDisplayed a');
});
</script>
jQuery for the slider:
jQuery(function($) {
$('a.forMovingPanel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active');
if ($(".forMovingPanel").is(':animated')) return false;
if (!$target.hasClass('active')) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: $this.width()
}, 500);
});
$target.addClass('active').show().css({
left: -($target.width())
}).animate({
left: 0
}, 500);
}
});
});