如何更改内部链接被点击的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背景颜色

回答

相关问题