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>
我可以onClick一个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
在原型或纯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屋!
查看全文