onClick change list styles *but
Question
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".
Thanks, Yan
3 answers
solution1
1 2010-12-18 10:44:43
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>
solution2
0 2010-12-18 10:46:46
I think you should check out jQuery. You could write a selector like this to add a class to all li s that don't have the class dontChange .
$('li').not('.dontChange').addClass('changed');
solution3
0 2010-12-18 10:48:10
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.