After it is clicked in Javascript, is it not going to follow the link and render a new page anyway? If so, you may need to incorporate some form of server-side solution to Hide hyperlinks for the page displayed [webmasterworld.com]

Try

onclick="this.className='off';return false"

Or if you are looking for a toggle sort of thing

onclick="this.className=(this.className=='off')?'active':'off'; return false;"

Cool i'll give it a try.

It's not loading a new page when clicking on the link - it's changing the contents of a DIV.

mehh, that definitely is working for me now.

One minor tweak - would it be possible to make the javascript turn off all other links with the class'active'?

So initially all links are set to the class "off" - when one is clicked, it's class is changed to 'active'.

Now when you click on a different link, it should turn the currently active link to 'off' and the new link to 'active'.

Is there an easy way to incorporate that?

Bit heavyer than last time but should work with multiple classes.

toggleLinks.js

toggleLinks={
 links:[],
 init:function(){
  var a;
  var cRegEx=/(^¦\s)(active¦off)(\s¦$)/;
  var ls=document.getElementsByTagName("a");
  for(var i=0;i<ls.length;i++){
   a=ls[i];
   alert(a.className + "\n" +cRegEx.test(a.className))
   if(cRegEx.test(a.className)){
    toggleLinks.links.push(a);
    a.onclick=toggleLinks.getSwitchTo(toggleLinks.links.length-1);
    }
   }
  },
 switchTo:function(l){
  var ls=toggleLinks.links;
  for(var i=0;i<ls.length;i++){
   ls[i].className=ls[i].className.replace(/(^¦\s)active(\s¦$)/,"$1off$2");)
   }
  ls[l].className=ls[l].className.replace(/(^¦\s)off(\s¦$)/,"$1active$2");
  },
 getSwitchTo:function(l){
  return function(){
   toggleLinks.switchTo(l);
   return false;
   }
  }
 }
window.onload=toggleLinks.init;

Useage:

<script type="text/javascript" src="toggleLinks.js"></script>
<a href="#" class="active">Active at start</a>
<a href="#" class="active">Also active at start</a>
<a href="#" class="off">Toggleable but not active at start</a>
<a href="#" class="blue">hello</a>
<a href="#" class="off blue">Not active at start + another class</a>

Tested in Opera 9.25 Windows Vista, Remember to replace broken ¦ with full pipes

There where mistakes in the last code. Try this one:
toggleLinks.js

toggleLinks={ 
 links:[],
 cOn :"active",
 cOff:"off",
 init:function(){ 
  var a; 
  var cRegEx=new RegExp("(^¦\\s)("+toggleLinks.cOn+"¦"+toggleLinks.cOff+")(\\s¦$)");
  var ls=document.getElementsByTagName("a"); 
  for(var i=0;i<ls.length;i++){ 
   a=ls[i]; 
   if(cRegEx.test(a.className)){ 
    toggleLinks.links.push(a);  
    var fn=toggleLinks.getSwitchTo(toggleLinks.links.length-1);
    if(a.addEventListener){
     a.addEventListener("click",fn,false); 
     }
    else if(a.attachEvent){
     a.attachEvent("onclick",fn);
     }
    else{
     a.onclick=fn;
     }
    } 
   } 
  }, 
 switchTo:function(l){ 
  var ls=toggleLinks.links;
  var onRegEx=new RegExp("(^¦\\s)"+toggleLinks.cOn+"(\\s¦$)");
  var offRegEx=new RegExp("(^¦\\s)"+toggleLinks.cOff+"(\\s¦$)");
  for(var i=0;i<ls.length;i++){ 
   ls[i].className=ls[i].className.replace(onRegEx,"$1"+toggleLinks.cOff+"$2"); 
   } 
  ls[l].className=ls[l].className.replace(offRegEx,"$1"+toggleLinks.cOn+"$2"); 
  }, 
 getSwitchTo:function(l){ 
  return function(){ 
   toggleLinks.switchTo(l); 
   return false; 
   } 
  } 
 }
if(window.addEventListener){
 window.addEventListener("load",toggleLinks.init,false); 
 }
else if(window.attachEvent){
 window.attachEvent("onload",toggleLinks.init);
 }
else{
 window.onload=toggleLinks.init;
 }

Tested on the same browser/platform. That code *should* work in any situation. In the last version I didn't think about other onclick handlers etc. you can also change the class names more easily in this version

Thanks, that worked perfect! :)

wouldn't it be easier to do something like this?

var whosOn = '';
function doClick(obj){
obj.className='active';
if(whosOn != undefined && obj != whosOn){
whosOn.className = 'off';
}
whosOn = obj;
}

then use

<a href="#" class="off" onclick="javascript:doClick(this);" >Click Here</a>

@Hurl, the code I made was unobtrusive, just include at the top of the page and it will handle the rest. I'm a firm belever that HTML is just markup, JavaScript is for behavior and CSS for presentation. It keeps code clean and easier to understand. Could you imagine adding/removing this behavior on hundreds of links using your code? Also the second code allows for multiple classnames.

[edit] Oh, and welcome to WebmasterWorld Hurl!

For goodness sakes publicly posted code is worthless unless a working test case is made available to those who view the archive. Please post at least a minimal working test case for those who follow, it's the least I do for those who follow my threads when I receive working answers.

Here is the not working test case I tried out...

- John

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

toggleLinks={
links:[],
cOn :"active",
cOff:"off",
init:function(){
var a;
var cRegEx=new RegExp("(^¦\\s)("+toggleLinks.cOn+"¦"+toggleLinks.cOff+")(\\s¦$)");
var ls=document.getElementsByTagName("a");
for(var i=0;i<ls.length;i++){
a=ls[i];
if(cRegEx.test(a.className)){
toggleLinks.links.push(a);
var fn=toggleLinks.getSwitchTo(toggleLinks.links.length-1);
if(a.addEventListener){
a.addEventListener("click",fn,false);
}
else if(a.attachEvent){
a.attachEvent("onclick",fn);
}
else{
a.onclick=fn;
}
}
}
},
switchTo:function(l){
var ls=toggleLinks.links;
var onRegEx=new RegExp("(^¦\\s)"+toggleLinks.cOn+"(\\s¦$)");
var offRegEx=new RegExp("(^¦\\s)"+toggleLinks.cOff+"(\\s¦$)");
for(var i=0;i<ls.length;i++){
ls[i].className=ls[i].className.replace(onRegEx,"$1"+toggleLinks.cOff+"$2");
}
ls[l].className=ls[l].className.replace(offRegEx,"$1"+toggleLinks.cOn+"$2");
},
getSwitchTo:function(l){
return function(){
toggleLinks.switchTo(l);
return false;
}
}
}
if(window.addEventListener){
window.addEventListener("load",toggleLinks.init,false);
}
else if(window.attachEvent){
window.attachEvent("onload",toggleLinks.init);
}
else{
window.onload=toggleLinks.init;
}

</script>
<style>
#master a {display: block; width: 100px; height: 100px; float: left;}
.toggle_off {background-color: #00f;}
.toggle_on {background-color: #f00;}
</style>
</head>

<body>

<a href="#" class="active">Active at start</a>
<a href="#" class="active">Also active at start</a>
<a href="#" class="off">Toggleable but not active at start</a>
<a href="#" class="blue">hello</a>
<a href="#" class="off blue">Not active at start + another class</a>

<div id="master">
<a class="toggle_off" id="div1" href="#" onclick="switcher('1');">1</a>
<a class="toggle_off" id="div2" href="#" onclick="switcher('2');">2</a>
<a class="toggle_off" id="div3" href="#" onclick="switcher('3');">3</a>
<a class="toggle_off" id="div4" href="#" onclick="switcher('4');">4</a>
<a class="toggle_off" id="div5" href="#" onclick="switcher('5');">5</a>
<a class="toggle_off" id="div6" href="#" onclick="switcher('6');">6</a>
<a class="toggle_off" id="div7" href="#" onclick="switcher('7');">7</a>
<a class="toggle_off" id="div8" href="#" onclick="switcher('8');">8</a>
<a class="toggle_off" id="div9" href="#" onclick="switcher('9');">9</a>
<a class="toggle_off" id="div10" href="#" onclick="switcher('10');">10</a>
<a class="toggle_off" id="div11" href="#" onclick="switcher('11');">11</a>
<a class="toggle_off" id="div12" href="#" onclick="switcher('12');">12</a>
<a class="toggle_off" id="div13" href="#" onclick="switcher('13');">13</a>
<a class="toggle_off" id="div14" href="#" onclick="switcher('14');">14</a>
<a class="toggle_off" id="div15" href="#" onclick="switcher('15');">15</a>
<a class="toggle_off" id="div16" href="#" onclick="switcher('16');">16</a>
<a class="toggle_off" id="div17" href="#" onclick="switcher('17');">17</a>
<a class="toggle_off" id="div18" href="#" onclick="switcher('18');">18</a>
<a class="toggle_off" id="div19" href="#" onclick="switcher('19');">19</a>
</div>

</body>
</html>

Looks like you had the CSS classes to "toggle_on" and "toggle_off", and the JS to change "active" and "off", a simple modification here should have it working:

cOn :"active",
cOff:"off",

A cleaned up, corrected version of your code, remember to replace the broken pipes (¦)

[1]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Test Page</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<script type="text/javascript"> 
toggleLinks={ 
links:[], 
cOn :"toggle_on", 
cOff:"toggle_off", 
init:function(){ 
var a; 
var cRegEx=new RegExp("(^¦\\s)("+toggleLinks.cOn+"¦"+toggleLinks.cOff+")(\\s¦$)"); 
var ls=document.getElementsByTagName("a"); 
for(var i=0;i<ls.length;i++){ 
a=ls[i]; 
if(cRegEx.test(a.className)){ 
toggleLinks.links.push(a); 
var fn=toggleLinks.getSwitchTo(toggleLinks.links.length-1); 
if(a.addEventListener){ 
a.addEventListener("click",fn,false); 
} 
else if(a.attachEvent){ 
a.attachEvent("onclick",fn); 
} 
else{ 
a.onclick=fn; 
} 
} 
} 
}, 
switchTo:function(l){ 
var ls=toggleLinks.links; 
var onRegEx=new RegExp("(^¦\\s)"+toggleLinks.cOn+"(\\s¦$)"); 
var offRegEx=new RegExp("(^¦\\s)"+toggleLinks.cOff+"(\\s¦$)"); 
for(var i=0;i<ls.length;i++){ 
ls[i].className=ls[i].className.replace(onRegEx,"$1"+toggleLinks.cOff+"$2"); 
} 
ls[l].className=ls[l].className.replace(offRegEx,"$1"+toggleLinks.cOn+"$2"); 
}, 
getSwitchTo:function(l){ 
return function(){ 
toggleLinks.switchTo(l); 
return false; 
} 
} 
} 
if(window.addEventListener){ 
window.addEventListener("load",toggleLinks.init,false); 
} 
else if(window.attachEvent){ 
window.attachEvent("onload",toggleLinks.init); 
} 
else{ 
window.onload=toggleLinks.init; 
} 
</script> 
<style> 
#master a {display: block; width: 100px; height: 100px; float: left;} 
.toggle_off {background-color: #00f;} 
.toggle_on {background-color: #f00;} 
</style> 
</head> 
<body>
<div id="master"> 
<a class="toggle_off" href="#">1</a> 
<a class="toggle_off" href="#">2</a> 
<a class="toggle_off" href="#">3</a> 
<a class="toggle_off" href="#">4</a> 
<a class="toggle_off" href="#">5</a> 
<a class="toggle_off" href="#">6</a> 
<a class="toggle_off" href="#">7</a> 
<a class="toggle_off" href="#">8</a> 
<a class="toggle_off" href="#">9</a> 
<a class="toggle_off" href="#">10</a> 
<a class="toggle_off" href="#">11</a> 
<a class="toggle_off" href="#">12</a> 
<a class="toggle_off" href="#">13</a> 
<a class="toggle_off" href="#">14</a> 
<a class="toggle_off" href="#">15</a> 
<a class="toggle_off" href="#">16</a> 
<a class="toggle_off" href="#">17</a> 
<a class="toggle_off" href="#">18</a> 
<a class="toggle_off" href="#">19</a> 
</div> 
</body> 
</html>[/1]

To be honest I really did not look too closely at the code as I was trying to write mine.

I was trying to think of something useful I could use mine for other then helping me comprehend JavaScript for loops...but with your script I'm thinking it could be used to possibly give hover support for IE6 only my system IE is IE8B1 at the moment. I'll take a closer look at the code after I uninstall IE8. ;) Thanks!

- John