リンクをクリックしたときにクラスを変更するにはどうすればよいですか？

Question

私はonClickで画像リンクの背景位置を変更したいと思います。私はこれを「アクティブな」クラスと呼んでいます。 jQueryを使用して、誰か提案がありますか？

Answer 1

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

あなたが背景位置にCSSクラスがすでにのbackground-positionプロパティを使用して

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

Answer 2

を設定していると仮定するとjQueryを使って利用可能/ removeClassとtoggleClassメソッドを追加もあります：

$("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のを使用する場合：

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