Log in

View Full Version : 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:


<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
<!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>