jquery - 当我们单击它时，如何突出显示图像库的选定拇指图像？

Question

我是 jquery 的初学者，我创建了一个简单的图像滑块。代码是这样的

     $(function() {
        $(".specialimage").click(function() {

        var image = $(this).attr("rel");
        $('#specialimage').hide();
        $('#specialimage').fadeIn('slow');
        $('#specialimage').html('<img src="' + image + '"/>');
        return false;
        });
        });

网址是：http: //ymaclub.com/test/special.html

图片库工作正常，但是当我们单击图库的特定拇指图像时，它没有突出显示选定的拇指图像。

当我们点击它时，任何人都可以帮助我如何突出显示图像库的选定拇指图像吗？

Answer 1

为选定的拇指创建一个 CSS 类说thumbSelected .. 并在单击拇指时添加该类...

尝试这个

更新的jQuery

    $(".specialimage").click(function() {
      $(".specialimage img").removeClass('thumbSelected'); //first remove existing thumbSelected class
      $(this).find('img').addClass('thumbSelected'); // add class to clicked thumb
      var image = $(this).attr("rel");
      $('#specialimage').hide().fadeIn('slow').html('<img src="' + image + '"/>');
      return false;
    });    

CSS

 .thumbSelected{
    border:1px solid red;  //this is just an example.. you can use any css properties here
 }

Answer 2

是拇指$(".specialimage")，如果是这样，您可以在单击功能中添加一个新类：

$(document).ready(function() {
    var thumbs = $(".specialimage");

    thumbs.click(function() {
      thumbs.removeClass('selected');
      $(this).addClass('selected');

      var imageUrl = $(this).attr("rel");
      $('#specialimage').hide('fast', function() {
        $(this).html('<img src="' + imageUrl + '"/>').fadeIn('slow');
      });

      return false;
    });
});

然后为班级添加您的突出显示CSSselected