如何通過單擊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

您確定您的意思是“ cnt的ID”嗎？ 您說過“單擊任何標簽時” ...是否有多個標簽？

確保同時設置其他邊框參數

如果有多個，請使用一類：

$().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並使用. 選擇器。 以下是示例：

如果您只有一個A標簽，且其id="cnt"為id="cnt"則可以使用：

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

如果您有多個使用cnt表示法的錨，請將其設置為class="cnt"並使用：

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

---

更好的是，將樣式保留在這樣的樣式表中

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

然后使用鏈接的點擊事件打開（或關閉）該類：

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