jQuery在活动时更改CSS

Question

我使用jQuery Cycle插件来浏览图库中的某些图片，并且我希望在该项目处于活动状态时让部分页面项目的颜色发生变化。

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：

.red {
color:#F00;
}
.black {
color:#000000;
}
#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;}

Cycle插件脚本：

<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 type="text/javascript">
  $("#nav li.activeSlide a").activeSlide(function() {
  $(this).removeClass('red').siblings().addClass('black');
 });​
</script>