Change the color of the div

**bassanio** · 12-14-2009, 12:56 PM

Dear All,

This is my Scenerio, my html page conatains multiple Divs each containing an hyper link, when user click the hyperlink the information will be loaded to the adjuscent iframe.

So what i need is that i want to change the color of the div when user clicks on one of the hyperlink(div) and when user clicks another div its colour should change same time the first div should restore it to the old color,

I need whole div color change not just over the hyperlink.

Please help me out on this

Thanks
Bassu

**molendijk** · 12-14-2009, 02:20 PM

You can use this for whatever tag (div, span) you like:

Code:

<head>
<script type="text/javascript">
function change_bg(tag,className) {
var els = document.getElementsByTagName(tag)
	for (i=0;i<els.length; i++) {
		if (els.item(i).className == className){
		 els.item(i).style.background="#dedede";		
	}
       }
      }
</script>

<style type="text/css">
.backgr{background:#dedede; display:inline}
</style>

</head>

<body>
<div  class="backgr" onclick="change_bg('div','backgr');this.style.background='#bacbac'">div 1 (click changes all divs)</div><br><br>

<div class="backgr" onclick="change_bg('div','backgr');this.style.background='#bacbac'">div 2 (click changes all divs)</div><br><br>

<div class="backgr" onclick="change_bg('div','backgr');this.style.background='#bacbac'">div 3 (click changes all divs)</div><br><br>

<span class="backgr" onclick="change_bg('span','backgr');this.style.background='#bacbac'">span 1 (click changes all spans)</span><br><br>

<span class="backgr" onclick="change_bg('span','backgr');this.style.background='#bacbac'">span 2 (click changes all spans)</span><br><br>

<span class="backgr" onclick="change_bg('span','backgr');this.style.background='#bacbac'">span 3 (click changes all spans)</span><br><br>

<a class="backgr" onclick="change_bg('a','backgr');this.style.background='#bacbac'">a 1 (click changes all a's)</a><br><br>

<a class="backgr" onclick="change_bg('a','backgr');this.style.background='#bacbac'">a 2 (click changes all a's)</a><br><br>

<a class="backgr" onclick="change_bg('a','backgr');this.style.background='#bacbac'">a 3 (click changes all a's)</a><br><br>

<button  onclick="change_bg('div','backgr'); change_bg('span','backgr'); change_bg('a','backgr');">everything back to normal</button>

</body>

===
Arie Molendijk.
===

**jscheuer1** · 12-14-2009, 02:26 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.myLinks{
	width: 7em;
	padding: 0.5em;
	border: 1px solid gray;
	margin: 0.25em;
	text-align: center;
	float: left;
}
.active {
	background-color: yellow;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('.myLinks a').bind('click', function(){
		$('.active').removeClass('active');
		$(this).parent().addClass('active');
	});
});
</script>
</head>
<body>
<div class="myLinks">
<a href="#">One</a>
</div>
<div class="myLinks">
<a href="#">Two</a>
</div>
<div class="myLinks">
<a href="#">Three</a>
</div>
</body>
</html>

Thread: Change the color of the div

Thread Tools

Search Thread

Change the color of the div

Bookmarks

Bookmarks

Posting Permissions