www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 31

Thread: onclick change class, remove when next link clicked

  1. #1
    Join Date
    Sep 2007
    Posts
    275

    onclick change class, remove when next link clicked

    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.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Sep 2007
    Posts
    275
    Brilliant! Thank you!

  4. #4
    Join Date
    Aug 2006
    Posts
    286
    great script,

    please explain these bits of code :

    var Lst;

    if (Lst) Lst.className='';

    Lst=obj;

  5. #5
    Join Date
    May 2008
    Posts
    2

    help

    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.

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    As the link links to another page the other page is loaded and the effect lost

    what exacty are you trying to do?
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    May 2008
    Posts
    2
    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.

  8. #8
    Join Date
    Sep 2007
    Posts
    275
    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.

  9. #9
    Join Date
    Jun 2009
    Posts
    2
    Quote Originally Posted by vwphillips View Post
    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.

  10. #10
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  11. #11
    Join Date
    Jun 2009
    Posts
    2
    Vic
    Thanks so much. This new code is great!

    Hranush

  12. #12
    Join Date
    Sep 2009
    Posts
    2
    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 ???

  13. #13
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  14. #14
    Join Date
    Sep 2009
    Posts
    2
    ooooo thank you very much ... u really are a PRO )
    it's working great ... just a few more tweaks and it's done.

  15. #15
    Join Date
    Sep 2009
    Posts
    8
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles