0

jqueryの初心者の場合、簡単な画像スライダーを作成しました。コードはこんな感じ

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

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

Webサイトは次のとおりです：http：//ymaclub.com/test/special.html

画像ギャラリーは正常に機能していますが、ギャラリーの特定の親指の画像をクリックしても、選択した親指の画像が強調表示されません。

画像ギャラリーの選択した親指の画像をクリックしたときに、それを強調表示する方法を教えてもらえますか？

4

2 に答える 2

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
 }
于 2013-03-14T10:17:59.550 に答える
0

$(".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;
    });
});

次に、クラスのハイライトCSSを追加しますselected

于 2013-03-14T10:13:22.343 に答える