AタグをクリックしてDIVのCSS値を変更するにはどうすればよいですか？

Question

id="cnt"で<a>タグをクリックした場合、div#fancybox-contentの境界線の色を#000に設定したいとします。私の試み：

$(document).ready(function(){ 
    $('a#cnt').click(function(){ 
     $("#fancybox-content").css("border-color","#000"); 
    }); 
}); 

このコードは機能しません。

Answer 1

あなたは「id of 'cnt'」を本当に使用していますか？あなたは「タグがクリックされたときに」と言っています...複数存在しますか？

クラスを使用して、複数がある場合は、同様

を他の境界パラメータを設定していることを確認してください：

$().ready(function() { 
    $("a.cnt").click(function() { 
    $("#fancybox-content").css({"border-width":"1px", "border-style":"solid", "border-color":"#000"}); 
    }); 
}) 

は、参照してください - http://jsbin.com/avuxe3/3

本当に1がある場合：

$().ready(function() { 
    $("#cnt").click(function() { 
    $("#fancybox-content").css({"border-width":"1px", "border-style":"solid", "border-color":"#000"}); 
    }); 
}) 

enter code here 

Answer 2

どのセレクタを使用するかが決まります。 IDを持つ単一のHTML要素がある場合は、#セレクタを使用します。複数の要素がある場合は、IDではなくクラスを使用し、.セレクタを使用する必要があります。あなたはcnt表記で複数のアンカーを持っている場合は、

$('a#cnt').click(function() { 
    $('#fancybox-content').css({"border":"solid 1px #000"}); 
}); 

class="cnt"と使用として設定：あなたはid="cnt"で、単一Aのタグを持っている場合は

は、あなたが使用します。以下は例です：

$('a.cnt').click(function() { 
    $('#fancybox-content').css({"border":"solid 1px #000"}); 
}); 

---

いっそのこと、この

のようなスタイルシートであなたのスタイルを保ちます

.borderOn { border: solid 1px #000; } 

そして、あなたのリンクをクリックイベントで（そしてあなたが好きな場合はオフ）にこのクラスを切り替える：迅速な対応のための

$('a.cnt').click(function() { 
    $('#fancybox-content').addClass('borderOn'); 
});