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'? 너는 "어떤 꼬리표가 클릭 될 때"말했다 ... ... 1 개 이상 있는가?

하나보다가있는 경우

는, 클래스 사용뿐만 아니라 다른 국경 매개 변수를 설정해야합니다 :

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

참조 - 정말 하나가있는 경우 http://jsbin.com/avuxe3/3

을 :

$().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'); 
});