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;
    });
});

然后为课程selected

添加高亮css

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

2 个答案: