Change div background color on link click
Question
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>
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.
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>
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"?
Perhaps there is a better way to achieve this. Here is the JSFiddle: http://jsfiddle.net/Rv5qG/23/
4 answers
solution1
0 2015-07-06 04:10:22
Can try a simpler JQuery:
$(function() {
$('a').click( function() {
$($(this).parent()).css('background-color', '#ccc');
});
});
See example Fiddle: http://jsfiddle.net/ddan/Rv5qG/29/
solution2
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).
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?
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?
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. 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.
solution3
0 2015-07-06 04:46:06
If you want to use JavaScript, you can the following:
<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.
JSFiddle Here: http://jsfiddle.net/n2cb9v68/
solution4
0 2015-07-06 05:14:04
这是一个链接-单击此功能。change_color（id）{$（“＃” + id）.css（'background-color'，“ #ccc”）;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.