jQuery Mobile 是一款功能强大的前端框架,对于移动设备的用户界面设计非常友好。其中,按钮选中是常用的交互功能,本文将介绍如何实现。
首先,在 HTML 中添加两个按钮,分别为选中和未选中状态:
<div data-role="content"> <button class="selected">已选中</button> <button class="unselected">未选中</button> </div>
在 CSS 中设置选中和未选中状态的样式,如下:
.selected { background-color: #ff0000; color: #fff; } .unselected { background-color: #fff; color: #000; }
然后,在 JavaScript 中添加选中功能的代码:
$(document).ready(function(){ $(".selected").click(function(){ $(this).addClass("unselected").removeClass("selected"); $(".unselected").addClass("selected").removeClass("unselected"); }); });
点击已选中按钮后,该按钮的 class 即变为 unselected,样式变为未选中状态,同时未选中按钮的 class 变为 selected,样式变为选中状态。
通过以上步骤,就可以实现 jQuery Mobile 按钮选中功能了。需要注意的是,此方法只适用于单选按钮,如需实现多选功能,请参考其他资源。