jquery - 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>