onClick 更改列表样式 [英] onClick change list styles
本文介绍了onClick 更改列表样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
假设我有一个简单的列表:
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>
我可以点击一个li"来改变所有li的样式，除了点击的那个吗?
Can I onClick of one "li" change styles of all li's except the one clicked?
所以如果我点击li"数字 2，那么列表将如下所示:
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>
所以如果我点击第一个li"，那么它会点击类，而其他的则不会点击.
So if I click on first "li" then it will have clicked class, while others will be notClicked.
如果你想玩它，这里是 jsbin:http://jsbin.com/ucuca4/edit
In case you want to play with it, here's jsbin: http://jsbin.com/ucuca4/edit
在 Prototype 或纯 JavaScript 中制作.
Make either in Prototype or plain JavaScript.
推荐答案
<!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>
这篇关于onClick 更改列表样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
