How can I change a CSS values on a DIV by clicking on an A tag?

When any开发者_StackOverflow <a> tag is clicked with the id="cnt" I want to set the border color of div#fancybox-content to #000. My attempt:

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

This code does not work.

---

are you sure you meant "id of 'cnt'"? you said "When any a tag is clicked"... is there more than one?

Make sure you set the other border parameters as well

If there is more than one, use a class:

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

see - http://jsbin.com/avuxe3/3

If there really is one:

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

enter code here

---

The trick is in which selector you use. If you have a single HTML element that has an ID, use the # selector. If there is more than one element, you should use a class rather than ID and use the . selector. Below are examples:

If you have a single A tag, with an id="cnt" then you would use:

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

If you have more than one anchor with the cnt notation, set it as class="cnt" and use:

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

---

Better yet, keep your styles in a stylesheet like this

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

And then toggle this class on (and off if you like) with your links' click events:

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