点击链接更改div背景颜色

Question

当我单击div中的链接时，我试图更改div的背景颜色，这是可行的，但是我希望该链接是真实的链接，也许链接到另一个页面，并且我似乎无法使用此现有代码来完成此操作。 （我知道这是以类似的方式提出的，但是我的最终结果与其他代码段不同）

 <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”循环中的一个递增变量。

这是无法使用的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”？

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

Answer 1

可以尝试一个更简单的JQuery：

$(function() {
    $('a').click( function() {
        $($(this).parent()).css('background-color', '#ccc');
    });
});

参见示例小提琴： http : //jsfiddle.net/ddan/Rv5qG/29/

Answer 2

如果要在href中使用URL（而不是脚本化的onClick），则在单击该锚点时，浏览器将导航到href中包含的URL并刷新页面（可能会完全离开您的网站）。

实际上，这会留下锚标记以及您可能尝试应用的所有可能样式。

如果该链接为“ http://www.google.com ”，请这样考虑，您是否希望自己的样式适用于着陆的页面？

您是否希望通过单击确保将浏览器保留在您的站点上，从而避免导航到该URL，因为您想确保该对象看到的背景颜色变为灰色？

您可以更改捕获和编码的事件的样式，并控制和保留在自己的应用程序中，这仅需要一些JavaScript，一些CSS类名和一些思想。 您不能真正改变其他网站的样式，也不应阻止标准的浏览器功能/浏览器导航，因为这确实使人们感到困惑。

Answer 3

如果要使用JavaScript，可以执行以下操作：

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

<body>
<div id="DIVi"><a href="#DIVi" onclick="CHANGE()">This is a link - Click me</a></div>

<script>
function CHANGE()
{document.getElementById("DIVi").style.background-color="#ccc"}
</script>

</body></html>

单击链接时，这会将DIVi更改为#ccc颜色。

JSFiddle在这里： http : //jsfiddle.net/n2cb9v68/

Answer 4

这是一个链接-单击此功能。change_color（id）{$（“＃” + id）.css（'background-color'，“ #ccc”）;}

点击链接更改div背景颜色

问题描述

4 个解决方案

解决方案1
0 2015-07-06 04:10:22

解决方案2
0 2015-07-06 04:13:02

解决方案3
0 2015-07-06 04:46:06

解决方案4
0 2015-07-06 05:14:04

点击链接更改div背景颜色

问题描述

4 个解决方案

解决方案1 0 2015-07-06 04:10:22

解决方案2 0 2015-07-06 04:13:02

解决方案3 0 2015-07-06 04:46:06

解决方案4 0 2015-07-06 05:14:04

解决方案1
0 2015-07-06 04:10:22

解决方案2
0 2015-07-06 04:13:02

解决方案3
0 2015-07-06 04:46:06

解决方案4
0 2015-07-06 05:14:04