CODEWITHSUNDEEP
javascripthtml
Stray Dog
Stray Dog

Reputation: 135

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. (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/

Upvotes: 0

Views: 3695

Answers (4)

anilviradiya
anilviradiya

Reputation: 139

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

Upvotes: 0

The Alien
The Alien

Reputation: 25

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/

Upvotes: 0

DDan
DDan

Reputation: 8276

Can try a simpler JQuery: 

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

See example Fiddle: http://jsfiddle.net/ddan/Rv5qG/29/

Upvotes: 1

Code Uniquely
Code Uniquely

Reputation: 6373

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.

Upvotes: 0

Related Questions