Как изменить класс при нажатии ссылки?

Question

Я хотел бы изменить исходное положение ссылки изображения на onClick. Я бы назвал это «активным» классом. Используя jQuery, есть ли у кого-нибудь предложения?

Answer 1

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

есть также добавить/removeClass и toggleClass методы, доступные с JQuery если у вас есть класс CSS с фоном положении уже установлен

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

Answer 2

Использование фона позиции свойство:

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

Использование класса:

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