Question

我正在使用一些jquery代码将Click上的图像交换到新的源代码，但我需要在点击时添加“active”类并在单击另一个elemnt时删除它，继承人jquery和html < / p>

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

试试这个：

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

Answer 2

此处包括CLICK事件

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

Answer 3

通常我会使用siblings()，但您的DOM并未隔离所有steplink s

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

    /* .. blah blah */
    $('.steplink').removeClass('active');
    $(this).addClass('active');
});

Answer 4

$('.steplink').click(function(e) {
  e.preventDefault();
  $('.steplink').removeClass('active');
  $(this).addClass('active');
  var href = $(this).attr('href');
  $('#stepimg').attr('src', href);
});

这会将活动类添加到当前锚点并更改图像的src。

Answer 5

你想在stepimg上做吗？

$('#stepimg').toggleClass('active');

将活动类添加到jQuery图像交换代码

5 个答案: