Hi there,
I need to do a few things onclick, but I'm having problems.
1. Swap divs onclick of a text link in a list (found a script for this)
2. Change the font color of the text link that is active, then change back to normal color when another text link is clicked. (found a script for this too)
Even though I found separate scripts for each, I'm not smart enough to trouble shoot the conflicts when you put them on the same page. I can get one or the other working, but not sure how to combine them....??? I will paste the scripts below.
(swap div onclick)
[
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d.className))
ar[ar.length] = d;
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i)
d.style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
}
</script>
]
(html tags for above script)
<div id="triggers">
<div onclick="reveal('meet');">
<a id="nav-btn" href="#"><span class="nav-hide">Meet the Team</span></a>
</div>
<div onclick="reveal('news');">
<a id="nav-btn" href="#"><span class="nav-hide">Team News</span></a>
</div>
<div onclick="reveal('schedule');">
<a id="nav-btn" href="#"><span class="nav-hide">2010 Schedule</span></a>
</div></div>
(change font color onclick and back, only one item highlighted at a time)
[
window.onload=function () { setStyles(); };
if (document.addEventListener)
function setStyles() {
ids = new Array('header1','header2','header3');
for (i=0;i<ids.length;i++) {
document.getElementById(ids).className='menu_head2';
document.getElementById(ids).onclick=function() { return CngClass(this); }
}
function CngClass(obj){
var currObj;
for (i=0;i<ids.length;i++) {
currObj = document.getElementById(ids);
if (obj.id == currObj.id) {
currObj.className=(currObj.className=='menu_head2')?'menu_head2_active':'menu_head2';
}
else { currObj.className='menu_head2'; }
}
return false;
}
]
(html tags for above code)
<p><a href="#" id="header1" class="menu_head2">Meet the Team</a></p>
<p><a href="#" id="header2" class="menu_head2">Team News</a></p>
<p><a href="#" id="header3" class="menu_head2">2010 Schedule</a></p>
