Applying CSS to Links on Current Page

[Nathan]

I've recently started working with wordpress and with the site up and running I want to add a few cosmetic changes. I'm using genesis with a fairly modified executive pro child theme. The issue I'm having is getting my side bar links to change background color when the page is current (visual feedback, so the user knows what page they're on). I've tried multiple solutions posted by others on the forums but unfortunately none are working for me. Locally I write a very simple page to see if I could get it to work with the JQuery method.

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('currentPage');
    }
  });
});
</script>

And it works perfectly. So I decided to try it on my development wordpress site and unfortunately it's not working. I added the scripts into the header box in the genesis tab, I've put all my sidebar links in a div tag with custom css class (sidebars are via genesis simple sidebars). And added the appropriate css classes/code into my theme.css file.

.test a{
	padding: 10px 10px 2px 2px;
	color:#64C9EA;
	text-decoration:none;
}

.test a.currentPage {
	background:black;
}

Any ideas?

Thanks,
Nathan

[Nathan]

Managed to fix it, changed the code to this and removed <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>.

<script>
jQuery(document).ready(function($){
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('currentPage');
    }
  });
});
</script>

[Author]

Posts