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

通常我会使用siblings()，但你的 DOM 不会隔离所有的steplinks

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

    /* .. blah blah */
    $('.steplink').removeClass('active');
    $(this).addClass('active');
});
于 2012-11-29T17:10:50.637 回答
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 回答
-1

你想在stepimg上做吗？

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