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 &quo开发者_C百科t;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".
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>
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');
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
加载中,请稍侯......
精彩评论