仿效与jquery切换按钮和CSS

我有多个元素与这样的同一类：仿效与jquery切换按钮和CSS

<html> 
<head><title>example</title> 
<script type="text/javascript" src="jquery.js"> 
</head> 
<body> 
<ul> 
    <li class="togglebutton">elem1</li> 
    <li class="togglebutton">elem2</li> 
    <li class="togglebutton selected">elem3</li> 
    <li class="togglebutton">elem4</li> 
</ul> 
$(document).ready(function(){ 

}); 
</body> 
</html>

所选元件具有与其他元件不同的颜色。当用户点击ANOTHER元素时，我希望该元素具有选定的类 - 并且所有其他元素不应该具有选定的类。换句话说，任何时候只能选择一个元素。

我想我已经制定了逻辑，但我不知道如何使用jQuery来实现它。

基本上我的做法是：

（当一个项目被选中）：

使用选择选择所有项目为 “ul> li.togglebutton” 所有 '选择'
删除类在“选择”到被点击，当前元件步骤1
加载类中取出的物品。

这个逻辑是否正确，还是有更好的方法去实现它？

另外，我怎么能实现上述逻辑（假设没有更好的选择），使用jQuery？

来源

2011-01-26 oompahloompah

$("ul li.togglebutton").click(function() { 
    $("ul li.togglebutton").removeClass("selected"); 
    $(this).addClass("selected"); 
});

编辑：的jsfiddle：http://jsfiddle.net/XfN4s/

来源

2011-01-26 00:10:03 switz

哇我的头在旋转 - 的jsfiddle！ – oompahloompah 2011-01-26 00:19:52

仿效与jquery切换按钮和CSS

回答

相关问题