jQuery: Changing CSS when <li> is active
I'm using the jQuery Cycle plugin to page some images in a gallery, and I'd like to have the color from part of the page items to change when that item is active.
HTML:
<div style="background-color:#000000; height:480px; width:285px; float:left;"> <ul id="nav"> <li> <a class="red" href="#"> <span class="red">Sports</span><br> Get your sports here. </a> </li> <li> <a class="red" href="#"> <span class="red">Topics</span><br> Topics here. </a> </li> <li> <a class="red" href="#"> <span class="red">News</span><br> Fit news for an unfit people. </a> </li> <li> <a class="red" href="#"> <span class="red">Weather</span><br> Sunny or Cloudy? </a> </li> </ul> </div>
CSS:
#slideshow { float: left; width:auto; position:relative; }
#nav { width: 245px; overflow:auto; height:auto; float: left; background-color:#000000; color:#FFFFFF; margin-top:0px; overflow:hidden; }
#nav li {width: 285px; height:80px; display:block; float: left; list-style: none; margin-left:-40px; }
#nav a {width: 285px; height:80px; display: block; color:#FFFFFF; text-decoration:none; font-size:13px; line-height:18px;}
#nav li.activeSlide a { background: #FF0000; color:#FFFFFF; text-decoration:none; font-size:13px; line-height:18px;}
#nav a:focus { outline: none; text-decoration:none; font-size:13px; line-height:18px;}
#nav a:hover { outline: none; color:#888888; text-decoration:none; font-size:13px; line-height:18px;}
#imgBox { width:570px; z-index:-9;}
.red {color:#F00;}
.black {color:#000000;}
The Cycle plugin script:
<script type="text/javascript"> $(function() { $('#slideshow').cycle({ fx: 'fade', speed: 'fast', timeout: 6000, pager: '#nav', pagerAnchorBuilder: function(idx, slide) { // return sel string for existing anchor return '#nav li:eq(' + (idx) + ') a'; } }); }); </script>
Script that doesn't work:
<script type="text/javascript"> $("#nav li.activeSlide a").activeSlide(function() { $(this).removeClass('red').siblings().addClass('black'); }); </script>
I'm rather new to jQuery, so I'm just ecstatic that I got the thing to look the way I want to with the pager feature. However, I need the red words to change to black when the list item is active.