0

私はいくつかのjqueryコードを使用して、クリック時に画像を新しいソースにスワップしていますが、クリック時に「アクティブ」のクラスを追加し、別の要素がクリックされたときにそれを削除する必要があります.jqueryとhtmlはこちら

html

<a class="steplink" href="http://placebox.es/600/500/ff0000/ffffff/Step1/">Step1</a>
<a class="steplink" href="http://placebox.es/600/500/ff0000/ffffff/Step2/">Step2</a>
<a class="steplink" href="http://placebox.es/600/500/ff0000/ffffff/Step3/">Step3</a>
<div id="stepimgwrap">
    <img src="http://placebox.es/600/500/ff0000/ffffff/Step1/" alt="Main Image" id="stepimg"/>
</div>

jQuery

$('.steplink').live("click", function() {
    $('#stepimg').hide();
    $('#stepimgwrap').css('background-image', "url('../img/ajax-loader.gif')");
    var i = $('<img />').attr('src',this.href).load(function() {
        $('#stepimg').attr('src', i.attr('src'));
        $('#stepimgwrap').css('background-image', 'none');
        $('#stepimg').show();
    });
    return false; 
});

前もって感謝します

4

5 に答える 5

2

これを試してください：

http://jsfiddle.net/WN73Q/

$('.steplink').live("click", function() {
$('#stepimg').hide();

$(this).addClass('active'); // <---------------add active class to link clicked 
$(this).siblings().removeClass('active'); // <-----remove the other link active class

$('#stepimgwrap').css('background-image', "url('../img/ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
    $('#stepimg').attr('src', i.attr('src'));
    $('#stepimgwrap').css('background-image', 'none');
    $('#stepimg').show();
});
   return false; 
});

</p>

于 2012-11-29T17:16:06.733 に答える
1

ここに CLICK イベントを含めて

$(document).ready(function(){
    $('.steplink').click(function(){
        $('#stepimgwrap').toggleClass('active');
        return false;
       //
    });
});
于 2012-11-29T23:55:33.393 に答える
0 
$('.steplink').click(function(e) {
  e.preventDefault();
  $('.steplink').removeClass('active');
  $(this).addClass('active');
  var href = $(this).attr('href');
  $('#stepimg').attr('src', href);
});

これにより、アクティブなクラスが現在のアンカーに追加され、画像の src が変更されます。

于 2012-11-29T17:23:21.807 に答える
0

通常は使用しますが、DOM はすべてのssiblings()を分離しませんsteplink

$('.steplink').live("click", function() {

    /* .. blah blah */
    $('.steplink').removeClass('active');
    $(this).addClass('active');
});
于 2012-11-29T17:10:50.637 に答える
-1

あなたはstepimgでそれをしたいですか？

$('#stepimg').toggleClass('active');
于 2012-11-29T17:07:32.440 に答える