用jQuert写一个开关按钮
时间: 2023-06-02 09:04:27 浏览: 79
好的,我可以回答这个问题。以下是一个简单的jQuery开关按钮示例:
HTML代码:
```html
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
```
CSS代码:
```css
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-right: 10px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* 样式可根据需求自行更改 */
```
JavaScript代码:
```js
$(document).ready(function() {
$('.switch input[type="checkbox"]').change(function() {
if ($(this).is(':checked')) {
// 开启状态
} else {
// 关闭状态
}
});
});
```
这样就实现了一个简单的jquery开关按钮,当用户点击开关按钮时,根据状态变化执行相应的操作。
阅读全文