Javascript CSS单选切换(垂直列表)
问题描述:
我想创建以下,但我不知道什么是最好的方式去做。Javascript CSS单选切换(垂直列表)
我想要一个网页上的项目的垂直列表。 每个项目都是可点击的。 当用户点击一个列表项时,我想要显示它已被选中(通过在背景中显示按钮图像,当再次单击相同的项目或单击任何其他列表项时,我想要删除该图像并如果被点击其他项目,选择图像显示该项目的后面。
有什么建议?
感谢
答
这在jQuery中尤其令人愉快。小提琴:http://jsfiddle.net/HgVmm/3/
HTML:
<ul id='items' class='selectable'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
JS:
// For a single list to act independent of other lists:
$('ul.selectable li').live('click', function() {
$(this).siblings('li.selected').removeClass('selected');
$(this).toggleClass('selected');
});
// For all `selectable` lists to act together:
$('ul.selectable li').live('click', function() {
$('li.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
});
CSS:
ul.selectable li { cursor: pointer; }
ul.selectable li.selected { background: red; } /* Style to taste */
答
// catch a click on any of the <li> items
$('li').click(function(){
// store a reference to the specific <li> that
// was clicked.
var $li = $(this);
// toggle the class (if it's applied, it's removed.
// if it's removed, re-apply it)
$li.toggleClass('clicked');
// Now, if it's applied, remove the class from any
// other <li> (single item clicked at a time)
if ($li.hasClass('clicked')){
$li.siblings().removeClass('clicked');
}
});
沿
+0
谢谢布拉德的回答。 – ssdesign
答
@ssdesign;我知道你接受一个答案,但可能是你可以检查这一项 http://jsfiddle.net/sandeep/HgVmm/4/
$('li').click(function(){
$('li').removeClass('selected');
$(this).addClass('selected');
});
你反对的jQuery或传统JavaScript?我可以很快向你展示一个jQuery示例;正常的js会花费更多的努力。 –
我对jQuery开放。 – ssdesign
我不明白为什么有人会这样做)-1)这个问题? – ssdesign