Help with active link in Jquery Sliding Panels...Javascript or CSS?
Hi,
I'm using jquery Spry Sliding panels for a new site i am working on. I am looking to style it similarly to this example in particular I am trying to find a way to give the navigation links (which will eventually be imgs) an active state (whichever link is currently selected-I wish it to have a different image and same for mouseover) as on the coda website.
I'm quite new to javascript, and having read similar articles on the forum have tried different suggestions, but as my mark-up is quite different in the first place to these with similar problems, haven't been able to find a solution for myself.
From looking at my mark-up below, would the best solution be to use CSS or javascript or both to allow for different active link states?
Here is my html script for the navigation:
- Navigate by index:
<a href="#" onclick="sp2.showPanel(0); return false; switchColors(this,'green'); ">ssdfsdfsdfsll</a> |
<a href="#" onclick="sp2.showPanel(1); return false;">Engineering & Environmental</a> |
<a href="#" onclick="sp2.showPanel(2); current = $this.parent().index();
return false;">Financial</a> |
<a href="#" onclick="sp2.showPanel(3); return false;">Sustainability</a> |
Here is the page as it stands (excuse the lack of design!)
Here is the SprySlidingPanels.js
Many Thanks in advance to anyone who can help me find a solution.