在链接点击上更改div背景颜色 [英] Change div background color on link click

问题描述

当我点击div中的链接时，我正在尝试更改div的背景颜色，这可行，但我希望链接是一个真正的链接，可能是另一个页面，我似乎无法用现有的码。 （我知道这个问题的方式类似，但我的最终结果与其他代码片段有所不同）

I am trying to change a div's background color when a link inside the div is clicked, this works, but I want the link to be a real link, maybe to another page and that I cannot seem to do it with this existing code. (I know this has been asked in similar way but my end result is different to other code snippets)

 <style>
 #DIVi {padding:20px;}   
 #DIVi:target{background:#CCC}
 </style>

 <div id="DIVi"><a href="#DIVi">This is a link - Click me</a></div>

以上是javascript构思的练习代码片段，与HTML片段基本相同，除非i（DIVi）是for循环中的递增变量。

The above is a practice code snippet for a javascript idea which is basically the same as the HTML snippet except that the "i" (DIVi) is an incrementing variable in a "for" loop.

这是非工作的javascript：

Here is the non working javascript:

 <script type="text/javascript">
 var i=0;
 function increase(){
   html += '<style>
   #DIV' + i + '{padding:20px;}#DIV' + i + ':target{background:#ccc}        </style><div id="DIV' + i + '"><a href="#DIV' + i + '">This is a link - Click me</a></div>';
   i++;
 }
 </script>

我的问题是如何使HTML链接成为真正的链接（可能是URL）以及如何使用在我的javascript示例中生成的HTML？

My question is "How to make the HTML link a real link (URL maybe) and how to use the resulting HTML in my javascript example"?

也许有更好的方法来实现这一目标。这是JSFiddle： http://jsfiddle.net/Rv5qG/23/

Perhaps there is a better way to achieve this. Here is the JSFiddle: http://jsfiddle.net/Rv5qG/23/

推荐答案

这是一个链接 - 点击mefunction change_color（id）{$（＃+ id）.css（'background-color'， #ccc）;}

This is a link - Click mefunction change_color(id){$("#" + id).css('background-color', "#ccc");}

这篇关于在链接点击上更改div背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！