jquery - リンクが現在のものでなくても、jQueryCSSのスタイルは同じままです

Question

フォーラムでこのjQueryコードを見つけました：http：//jsfiddle.net/nZLpk/8/ ただし、コードをこのhttp://jsfiddle.net/c5LTj/に変更する$(this).css({'font-weight': 'bold', 'border-left': '5px solid #555554'});と、境界線を変更してもリンクに残りますそれが選択されていない場合...助けてください。ありがとう！

Answer 1

クラスをリセットするのと同じ方法border-leftで、クラスを持つすべての要素をリセットする必要があります。atagfont-weight

$(document).ready(function(){
    $('.atags').click(function(){
        $('.atags').css({"font-weight":"300", 'border-left': '0'});
        $(this).css({'font-weight': 'bold', 'border-left': '5px solid #555554'});
    });
});

http://jsfiddle.net/c5LTj/1/

以下のコメントで言ったように、色を変更したいだけの場合：

$('.atags').css({"font-weight":"300", 'border-left-color': '#555554'});
$(this).css({'font-weight': 'bold', 'border-left-color': '#eee'});

showonlyoneまた、インラインhref="javascript:showonlyoneインスタンスを削除しshowonlyone、リンクの外観を変更するのと同じ場所で作業を行うと、コードを大幅に改善できます。

Answer 2

質問に答える人々が実際の質問に答えていることを感謝します（「期待される結果が表示されるようにこの正確なコードを修正するにはどうすればよいですか？」）が、この機会に別のアプローチを指摘します。

発生する必要のあるすべてをカプセル化するCSSを使用してクラスを定義し、そのクラスをで追加するか、でaddClass()削除する必要がありremoveClass()ます。削除を処理する古典的な方法は、削除する要素を追跡することではなく、必要な要素のみに再適用する前にすべてから削除することです（これは、多かれ少なかれ既存のコードが実行していることです） 、クラスの代わりにスタイルを使用する場合を除く）。

$(document).ready(function(){
    $('.atags').click(function(){
        $('.atags').removeClass('selected');
        $(this).addClass('selected');
    });
});

Answer 3

あなたは国境をリセットしていません、

 $('.atags').click(function(){
        $('.atags').css({"font-weight":"300", "border-left":0});
        $(this).css({'font-weight': 'bold', 'border-left': '5px solid #555554'});

})

正常に動作するはずです

Answer 4

太字のスタイルを適用する前に、border-leftすべての要素に適用するcssに追加する必要があるためです。.atags

$(document).ready(function(){
    $('.atags').click(function(){
        $('.atags').css({'font-weight': '300', 'border-left': '0px'});
        $(this).css({'font-weight': 'bold', 'border-left': '5px solid #555554'});
    });
});

コードでスタイルを直接指定するのではなく、CSSクラスでこれを行うことをお勧めします。また、HTML属性内でJavaScriptを使用しないことをお勧めします：http：//jsfiddle.net/c5LTj/3/。