淘先锋技术网

首页 1 2 3 4 5 6 7

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 按钮选中功能了。需要注意的是,此方法只适用于单选按钮,如需实现多选功能,请参考其他资源。