点击链接更改div背景颜色
[英]Change div background color on link click
问题描述
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. 
当我单击div中的链接时，我试图更改div的背景颜色，这是可行的，但是我希望该链接是真实的链接，也许链接到另一个页面，并且我似乎无法使用此现有代码来完成此操作。 (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>
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想法的练习代码段，该代码段与HTML代码段基本相同，只是“ i”（DIVi）是“ for”循环中的一个递增变量。
Here is the non working javascript: 这是无法使用的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>
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"? 我的问题是“如何使HTML链接成为真正的链接（可能是URL），以及如何在我的JavaScript示例中使用生成的HTML”？
Perhaps there is a better way to achieve this. 也许有更好的方法可以实现这一目标。 Here is the JSFiddle: http://jsfiddle.net/Rv5qG/23/ 这是JSFiddle： http : //jsfiddle.net/Rv5qG/23/
4 个解决方案
解决方案1
0 2015-07-06 04:10:22
Can try a simpler JQuery: 可以尝试一个更简单的JQuery：
$(function() {
$('a').click( function() {
$($(this).parent()).css('background-color', '#ccc');
});
});
See example Fiddle: http://jsfiddle.net/ddan/Rv5qG/29/ 参见示例小提琴： http : //jsfiddle.net/ddan/Rv5qG/29/
解决方案2
0 2015-07-06 04:13:02
If you mean using a URL in the href (and not a scripted onClick) then when you click on that anchor the browser is going to NAVIGATE to the url contained in you href and refresh the page (potentially leaving your site entirely). 如果要在href中使用URL（而不是脚本化的onClick），则在单击该锚点时，浏览器将导航到href中包含的URL并刷新页面（可能会完全离开您的网站）。
In effect this is leaving your anchor tag behind and any possible styling that you might try to apply. 实际上，这会留下锚标记以及您可能尝试应用的所有可能样式。
Think about it like this if that link were " http://www.google.com " would you expect your style to apply to the page you landed on? 如果该链接为“ http://www.google.com ”，请这样考虑，您是否希望自己的样式适用于着陆的页面？
Would you expect the click to keep the browser on your site preventing you from navigating to the URL because you want to make sure the sure sees a background colour change to grey? 您是否希望通过单击确保将浏览器保留在您的站点上，从而避免导航到该URL，因为您想确保该对象看到的背景颜色变为灰色？
You can change styles on events that you capture and code for and which yo control and keep within you own app, That just requires some JavaScript, a few CSS class names and a bit of thought. 您可以更改捕获和编码的事件的样式，并控制和保留在自己的应用程序中，这仅需要一些JavaScript，一些CSS类名和一些思想。 You can't really alter other sites styling and you shouldn't prevent the standard browser functionality / navigation of your browser as this really confuses people. 您不能真正改变其他网站的样式，也不应阻止标准的浏览器功能/浏览器导航，因为这确实使人们感到困惑。
解决方案3
0 2015-07-06 04:46:06
If you want to use JavaScript, you can the following: 如果要使用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>
This would change the DIVi to colour #ccc when the link is clicked. 单击链接时，这会将DIVi更改为#ccc颜色。
JSFiddle Here: http://jsfiddle.net/n2cb9v68/ JSFiddle在这里： http : //jsfiddle.net/n2cb9v68/
解决方案4
0 2015-07-06 05:14:04
这是一个链接-单击此功能。change_color（id）{$（“＃” + id）.css（'background-color'，“ #ccc”）;}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.