1

我目前正在使用这个 jQuery Cycle 插件:http: //jquery.malsup.com/cycle/

我有以下代码:

<script type="text/javascript">
// Slideshow cycle init
$(document).ready(function() {
    $('#slideshow').cycle({
      fx: 'fade',
      speed: 500
    });
});
function setSlide(index) {
     $('#slideshow').cycle(index);
}

// current link
 $(document).ready(function(){   
   $('ul.products-slideshow-thumbs li a').click(function(){
      $(this).addClass("current").removeClass("current"); // this is what I'm trying to work on..
    });
  });
</script>

<div id="slideshow" class="products-slideshow">
  <img src="product-slides/1.jpg" />
  <img src="product-slides/2.jpg" />
  <img src="product-slides/3.jpg" />
  <img src="product-slides/4.jpg" />
  <img src="product-slides/5.jpg" />
</div>

<ul class="products-slideshow-thumbs">
  <li><a onclick="setSlide(0);"><img src="product-slides/thumbs/1.jpg" /></a></li>
  <li><a onclick="setSlide(1);"><img src="product-slides/thumbs/2.jpg" /></a></li>
  <li><a onclick="setSlide(2);"><img src="product-slides/thumbs/3.jpg" /></a></li>
  <li><a onclick="setSlide(3);"><img src="product-slides/thumbs/4.jpg" /></a></li>
  <li><a onclick="setSlide(4);"><img src="product-slides/thumbs/5.jpg" /></a></li>
</ul>

现在,它的工作原理应该是幻灯片和样式。但是,我正在尝试使用 jQuery 向当前显示的缩略图链接(包装在“products-slideshow-thumbs”类中)添加一个类。
当我点击缩略图链接时,上面代码中的 jQuery 添加了类,但是当我点击另一个缩略图链接时,两个缩略图链接都保留了“当前”类。有没有办法确保只有一个链接(当前链接)保持“当前”类?

我们欢迎所有的建议!感谢您的阅读。

4

1 回答 1

2

改变这个:

$(document).ready(function(){   
   $('ul.products-slideshow-thumbs li a').click(function(){
      $(this).addClass("current").removeClass("current"); // this is what I'm trying to work on..
    });
  });

进入这个:

$(document).ready(function(){   
   $('ul.products-slideshow-thumbs li a').click(function(){
      $('ul.products-slideshow-thumbs li a').removeClass("current");
      $(this).addClass("current");
    });
  });

看看我在那里做了什么?在将 current-class 添加到 之前$(this),我将它从所有其他products-slideshow-thumbs li a

于 2011-04-05T15:50:36.620 回答