Home/ Questions/Q 3611604
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T21:53:46+00:00

Let’s say I have a simple list: <ul> <li class=notClicked>1</li> <li class=notClicked>2</li> <li class=notClicked>3</li>

  • 0

Let’s say I have a simple list:

  <ul>
    <li class="notClicked">1</li>
    <li class="notClicked">2</li>
    <li class="notClicked">3</li>
  </ul>

Can I onClick of one “li” change styles of all li‘s except the one clicked?

So if I click “li” number 2, then the list will look like:

  <ul>
    <li class="notClicked">1</li>
    <li class="clicked">2</li>
    <li class="notClicked">3</li>
  </ul>

So if I click on first “li” then it will have clicked class, while others will be notClicked.

In case you want to play with it, here’s jsbin: http://jsbin.com/ucuca4/edit

Make either in Prototype or plain JavaScript.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <!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='Clicked';
             Lst=obj;
            }

            /*]]>*/
        </script>
        <style>
            .notClicked {color: black}
            .Clicked {color: red}
        </style>
    </head>

    <body>
        <ul>
            <li>
                <a onclick="CngClass(this);" href="#" class="notClicked">1
                </a>
            </li>
            <li>
                <a onclick="CngClass(this);" href="#"  class="notClicked">2
                </a>
            </li>
            <li>
                <a onclick="CngClass(this);" href="#"  class="notClicked">3
                </a>
            </li>
        </ul>
    </body>
</html>
    • 0