Question

我想在onClick上更改图片链接的背景位置。我称之为“活跃”类。使用jQuery，有没有人有任何建议？

Answer 1

$('.active').click(function() {
  $('.active').css('background-position', value);
});

还有jquery可用的/ removeClass和toggleClass方法，假设你有一个已经设置了background-position的css类

http://api.jquery.com/category/css/

Answer 2

使用background-position属性：

$("a.imageLink").click
(
 function()
 {
  $(this).css("background-position", "YOUR_IMAGE_X_POSITION YOUR_IMAGE_Y_POSITION")
 }
)

使用class：

<style type="text/css">
    .leftIMG
    {
        background-position: 0 0;
        background-image: URL("YOUR_IMAGE");
    }

    .rightIMG
    {
        background-position: 100 0;
        background-image: URL("YOUR_IMAGE");
    }
</style>

$("a.imageLink").click
(
 function()
 {
    var a = $(this);
    if(a.hasClass("rightIMG"))
    {
        a.addClass("leftIMG").removeClass("rightIMG");
    }
    else
    {
        a.addClass("rightIMG").removeClass("leftIMG");
    }
 }
)

Answer 3

如果你使用jQuery：

$('yourselector').click(function() {
    $(this).addClass('active');
});

如果你不这样做：

var addActiveClass = function() {
    this.className += ' active';
};
if(el.addEventListener) {
    el.addEventListener('click', addActiveClass, false);
} else if(el.attachEvent) {
    el.attachEvent('onclick', addActiveClass);
} else {
    var cachedOnClick;
    if(el.onclick) {
        cachedOnClick = el.onclick;
    }
    el.onclick = function(e) {
        if(cachedOnClick !== undefined) {
            cachedOnClick.call(this, e);
        }
        addActiveClass.call(this);
    };
}

单击链接时如何更改班级？

3 个答案: