'onClick change list styles *but

Following up from the last question answered: onClick change list styles

Instead of changing all classes, change all classes but "li's" with a particular class. So if one of the li's has a class name of dontChange the its class name won't be change but all others will.

When you click an item it should be changed to "clicked" all other items but the item with "dontChange" to "notClicked". When you doubleclick a "clicked" or "notClicked" item it should change to "dontChange" and everything else should change to "notClicked".

Solution 1:^[1]

try this

<!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='';
 if(obj.className=='dontChange')
 {
     obj.className='dontChange';
 }
 else
 {
 obj.className='Clicked';
 Lst=obj;
 }

}

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

</style></head>

<body>

<ul>  
<li>
<a onclick="CngClass(this);" href="#" class="notClicked">Test 1
</a>
</li>  
<li>
<a onclick="CngClass(this);" href="#"  class="notClicked">Test 2
</a>
</li>  
<li>
<a onclick="CngClass(this);" href="#"  class="dontChange">Test 3
</a>
</li>  
</ul>

</body>


</html>

Solution 2:^[2]

I think you should check out jQuery. You could write a selector like this to add a class to all lis that don't have the class dontChange.

$('li').not('.dontChange').addClass('changed');

Solution 3:^[3]

using the code from the previous answer you'll want to change it to something like this

    <!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">
var Lst;

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

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

<body>

<ul>
<li>
<a onclick="CngClass(this);" href="#" class="dontChange">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>

This simply says that if it is a particular class then change it.

tested in FF3.61

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Bhanu Prakash Pandey
Solution 2	GolezTrol
Solution 3	Ross

'onClick change list styles *but

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]