onclick change class, remove when next link clicked

**nnhubbard** · 12-03-2007, 04:24 PM

I have a side menu that I have added an onclick statement to, which will change the css class for that item to "selected" so that I can apply styles for the selected link. Here is what I have:

HTML Code:

<style type="text/css">
<!--
.selected {
	font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000;
}
-->
</style>
    <ul>
      <li><a onclick="this.className='selected'" href="#">Test 1</a></li>
      <li><a onclick="this.className='selected'" href="#">Test 2</a></li>
      <li><a onclick="this.className='selected'" href="#">Test 3</a></li>
    </ul>

How can I modify this so, after one selection is clicked, and you click something else, the class gets removed from the first clicked item, and is now applied to the newly clicked item? I only want the class applied to the currently clicked item, and removed when they click on another item.

**vwphillips** · 12-03-2007, 05:20 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
 if (Lst) Lst.className='';
 obj.className='selected';
 Lst=obj;
}

/*]]>*/
</script></head>

<body>

<style type="text/css"> 
<!-- .selected { font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000; } --> 
</style>  
<ul>  
<li>
<a onclick="CngClass(this);" href="#">Test 1
</a>
</li>  
<li>
<a onclick="CngClass(this);" href="#">Test 2
</a>
</li>  
<li>
<a onclick="CngClass(this);" href="#">Test 3
</a>
</li>  
</ul>

</body>


</html>

**nnhubbard** · 12-03-2007, 05:24 PM

Brilliant! Thank you!

**changintimes** · 12-03-2007, 07:35 PM

great script,

please explain these bits of code :

var Lst;

if (Lst) Lst.className='';

Lst=obj;

**sandergang** · 05-01-2008, 08:21 AM

After searching I found this nice option. And it works fine if I copy the code and script. But hen I changed the menu link, it doen't work anymore. I hope somebody can tell why. See http://test2.sg-graphics.nl/

<ul>
<li><a onclick="CngClass(this);" href="index.php">Algemeen</a></li>
<li><a onclick="CngClass(this);" href="haptonomie.php">Haptonomie</a></li>
<li><a onclick="CngClass(this);" href="#">Test 3</a></li>
</ul>

Test3 is still working with a.selected

I spend a lot of time to find a thing like this. Is there somebody with an other option, maybe with submenu items. But for this site this one is good enough, if it works after changing the link.

**vwphillips** · 05-01-2008, 12:30 PM

As the link links to another page the other page is loaded and the effect lost

what exacty are you trying to do?

**sandergang** · 05-01-2008, 01:01 PM

Hello vwphillips,
What I'm trying,
I just want a menu with a menu button witch shows an active status. That's where this toppic is about. and the example world with href="#"> But after inserting the right pagelink it doesn't work.

**nnhubbard** · 05-01-2008, 01:08 PM

That is because you move to a different page and the class that was loaded onto the nav item is no longer there. My intention when using this script was for ajax pages, which it works nicely, because the nav never changes, only the body content.

**hranush** · 06-03-2009, 03:38 AM

Originally Posted by vwphillips

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
 if (Lst) Lst.className='';
 obj.className='selected';
 Lst=obj;
}

/*]]>*/
</script></head>

<body>

<style type="text/css"> 
<!-- .selected { font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000; } --> 
</style>  
<ul>  
<li>
<a onclick="CngClass(this);" href="#">Test 1
</a>
</li>  
<li>
<a onclick="CngClass(this);" href="#">Test 2
</a>
</li>  
<li>
<a onclick="CngClass(this);" href="#">Test 3
</a>
</li>  
</ul>

</body>


</html>

Hi Vic,
two part message:
First: is it possible to set the 'selected' as default for the one of the links? (without having it stay selected always)...
Second: I also want to add that your code it is great and really works beautifully!! I just wanted to thank you for posting it to us.

**vwphillips** · 06-03-2009, 05:16 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Lst;

function CngClass(obj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (Lst) Lst.className='';
 obj.className='selected';
 Lst=obj;
}

/*]]>*/
</script></head>

<body onload="CngClass('tst')">

<style type="text/css">
<!-- .selected { font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000; }
-->
</style>
<ul>
<li>
<a id="tst" onclick="CngClass(this);" href="#">Test 1
</a>
</li>
<li>
<a onclick="CngClass(this);" href="#">Test 2
</a>
</li>
<li>
<a onclick="CngClass(this);" href="#">Test 3
</a>
</li>
</ul>

</body>


</html>

**hranush** · 06-03-2009, 01:38 PM

Vic
Thanks so much. This new code is great!

Hranush

**gozilla** · 09-01-2009, 02:59 AM

that code is great, but i have a question about it .... i made that onclcick work for <tr> tag but than i have multiple tables on my page and when i click on one <tr> then resets classes in all tables, but i just want to reset classes in table where i am clicking, any idea how to do that ???

**vwphillips** · 09-01-2009, 04:16 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
<!--
.selected { font: bold 18px Arial, Helvetica, sans-serif; color:#FF0000; }
.selected1 { font: bold 18px Arial, Helvetica, sans-serif; color:#FF00FF; }
-->
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var T0,T1;

function CngClass(cls){
 this.lst=null;
 this.cls=cls;
}

CngClass.prototype.CngClass=function(obj){
 if (typeof(obj)=='string') obj=document.getElementById(obj);
 if (this.lst) this.lst.className='';
 obj.className=this.cls;
 this.lst=obj;


}

/*]]>*/
</script></head>

<body onload="T0=new CngClass('selected');T0.CngClass('t0');T1=new CngClass('selected1');T1.CngClass('t1');">

<table border="1">
  <tr id="t0" onclick="T0.CngClass(this);">
    <td>Table 0</td>
  </tr>
  <tr onclick="T0.CngClass(this);">
    <td>Table 0</td>
  </tr>
</table>
<table border="1">
  <tr id="t1" onclick="T1.CngClass(this);">
    <td>Table 1</td>
  </tr>
  <tr onclick="T1.CngClass(this);">
    <td>Table 1</td>
  </tr>
</table>
</body>


</html>

**gozilla** · 09-02-2009, 03:13 AM

ooooo thank you very much ... u really are a PRO

)
it's working great ... just a few more tweaks and it's done.

**JenniAngel** · 09-08-2009, 09:38 AM

that´s a great code... very usefull, but i have a question. I want to change the class name of a link by clicking another different link, just like changing the menu option by clicking the link of its submenu. But my code is in a way that reloads the page everytime i click the menu option. In other words, how can i change the class name of the menu option when i'm in the page of this menu option? Including setting the 'selected' as default for the home link.

ps: i hope you understand the question... sorry if i wasnt clear.