向jQuery映像交换代码中添加活动类

Question

我正在使用一些jquery代码将单击时的图像交换到一个新源，但我需要它在单击时添加“active”类，并在单击另一个元素时删除它，这是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; 
});

提前致谢

Answer 1

这里包括CLICK事件

$(document).ready(function(){
    $('.steplink').click(function(){
        $('#stepimgwrap').toggleClass('active');
        return false;
       //
    });
});

Answer 2

试试这个：

http://jsfidle.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; 
});

这是一个很好的例子