PDA

View Full Version : Change bg on click



Dave.H
Apr 11th, 2007, 11:14 PM
Ok so my website is here:

www.casino-spot.com

My problem is that if you look on the content section on the right it is all in ajax. When you click on the tab sponsors, winners, or links I need them to change from blue to white or white to blue depending on what tab I click.

So say I click on winners I want winners to turn white so you can asociate the tab with the content but sponsors and links need to turn blue.

I know how to do this and did do it with my other content section with css but because you do not refresh or switch pages with ajax im not sure how to do this.

perhaps on onclick statement that changes the class but I dont know the correct code format for that.

Thanks in advance.

Dave.H
Apr 12th, 2007, 12:23 AM
Is it possible to change a links class onclick? If so whats the code to do it?

koyama
Apr 12th, 2007, 12:55 AM
Is it possible to change a links class onclick? If so whats the code to do it?
This is actually a JavaScript question.

It seems that you are on the right track. You have already set up the framework in your CSS so that changing the class name dynamically will give the desired result.

This may get you started. Instead of this:


<li class="fs_winners"><a href="javascript:ajaxpage('winners.html','rightc_replace', false);
loadobjs('winners.css')">Winners</a></li>

try this to begin with:


<li class="fs_winners"><a onclick="this.parentNode.className='winners2';
ajaxpage('winners.html','rightc_replace', false);
loadobjs('winners.css'); return false;">Winners</a></li>

Not the final solution, though, since you also need to change it back to the original class when you click one of the other tabs. Better to set up a function probably. But now you get the idea?

david_kw
Apr 12th, 2007, 04:53 AM
Here is a sample of changing the class name dynamically.



<html>
<head>
<title>Dynamically Change Class Name</title>
<style type="text/css">
.highlighted { background-color: yellow; text-decoration: underline; }
.normal { background-color: white; text-decoration: none }
</style>
<script type="text/javascript">
var highlight = false;

function doIt() {
highlight = !highlight;
var adiv = document.getElementById("adiv");
adiv.innerHTML = "highlight=" + highlight;

var alink = document.getElementById("alink");
if (highlight) {
alink.className = "highlighted";
} else {
alink.className = "normal";
}
}
</script>
</head>
<body>
<div>
<button onclick="doIt();">Toggle highlight</button>
<br />
<div id="adiv">highlight=false</div>
<a href="#" id="alink" class="normal">Here is a Link</a>
</div>
</body>
</html>


david_kw