如何更改內部鏈接被點擊的div背景顏色

如何更改背景顏色爲綠色時，點擊並保持顏色綠色鏈接，直到我再次點擊此鏈接，然後顏色必須是白色如何更改內部鏈接被點擊的div背景顏色

我有這個代碼至今：

<% foreach (var group in Model.Results) 
     { %>  

     <div id="group-select<%: group.GroupId %>" style="width:95%; height:50px; border:solid 1px black; margin:5px;" > 
      <h3><a href="javascript:OnGroupClicked(<%: group.GroupId %>)" id="changer<%: group.GroupId %>" ><%: group.Name %></a></h3> 
     </div> 

    <% } %>

和JS：

<script type="text/javascript"> 
function OnGroupClicked(groupId) { 
    $("#changer" + groupId).on("click", function (e) { 
    e.preventDefault(); 
    var body = $('#group-select' + groupId), 
     green = "rgb(0, 128, 0)", 
     white = "rgb(255, 255, 255)"; 

    if (body.css("backgroundColor") !== green) { 
     body.css("backgroundColor", green); 
    } else { 
     body.css("backgroundColor", white); 
    } 
    }); 
} 
</script>

可以有一個人幫助我嗎？綠色的顏色表明選擇了一個特定的組，並且當它是白色的時候它不被選中。所以當頁面第一次加載時它將是白色的。我點擊它，它是綠色的，並保持綠色，直到我再次點擊它。

感謝

來源

2013-02-13 charlie_cat

難道你不能玩'a：visited' CSS樣式嗎？ – 2013-02-13 10:24:43

你可以做這樣的事情：

http://jsbin.com/evupih/1/edit

你的代碼的問題是，你檢查十六進制值。但是，如果你讀的backgroundColor，你會得到的RGB值;-)

來源

2013-02-13 10:19:30 Christian

我需要我的鏈接作爲一個動作鏈接，我可以給它一個ID即給鏈接一個ID？ – 2013-02-13 10:29:38

我不知道這是什麼：HTML.ActionLink，但它沒有任何意義，如果你沒有設置一個ID .. – Christian 2013-02-13 10:34:48

它是與html5的asp.net mvc 3，該鏈接中的代碼工作，但ic使我整個身體綠色我只需要div綠色和在html5中你不能有一個div標籤的身體標記，因此我不知道我可以使用該代碼？ – 2013-02-13 10:41:37

你爲什麼不創建一個名爲css類「點擊」，如：

.clicked{background-color:#00CC00}

然後做：

<script type="text/javascript"> 
function OnGroupClicked(groupId) 
{ 
    if ($("#ColorHidden" + groupId).hasClass("clicked")) { 
    $("#ColorHidden" + groupId).removeClass("clicked") 
    } else { 
    $("#ColorHidden" + groupId).addClass("clicked") 
    } 
}

來源

2013-02-13 10:05:35 walter

有沒有一種方法可以使它與我目前使用的代碼一起工作？用你的代碼，當我點擊鏈接div保持白色 – 2013-02-13 10:18:34

我想你應該使用： target.css（「background-color」，green）; 而不是： target.css（「backgroundColor」，綠色）; – walter 2013-02-18 19:01:20

你需要做的是找到DIV包圍的各個環節：

$(function(){ 
    $("#changer").on("click",function(e){ 
    e.preventDefault(); 
    var target = $(this).parent(), 
     green = "rgb(0, 128, 0)", 
     white = "rgb(255, 255, 255)"; 

    if(target.css("backgroundColor") !== green){ 
     target.css("backgroundColor", green); 
    }else{ 
     target.css("backgroundColor", white); 
    } 

    }); 
});

一旦這樣的工作，你可以通過它細化如@jimmy所示，使用類和hasClass/addClass/removeClass - 如果你想從粉紅色變成黑色，這種方式更加靈活。

這假定父元素是組選擇div。如果你改變鏈接的佈局，這可能會中斷，你需要使用id專門針對div - 我在這裏沒有采取這種方法來提高速度。

來源

2013-02-13 11:26:02 Raad

如何更改內部鏈接被點擊的div背景顏色

回答

相關問題