学做网站培训课程介绍

当前位置:

怎么制作网站中的滑动选择开关

网站中的滑动选择开关是比较常见的开关选择器,方便用户可以打开或者关闭某个参数。效果如下图:

下面分享一下网站中的滑动选择开关的制作代码:

HTML代码:


<div class="sliderkkk">
<input type="checkbox" id="togglebtn" name="addpageok" value="<?php echo get_option('addpageok');?>"  />
<label for="togglebtn"></label>
</div>

JQUERY代码:


<script>
var toggle = document.getElementById('togglebtn');
toggle.addEventListener('change', function() {
if (this.checked) {
jQuery(this).val('1');
jQuery('.sliderkkk').addClass('bluess');
// 处理选中状态的逻辑
console.log('开关已打开');
} else {
jQuery(this).val('0');
jQuery('.sliderkkk').removeClass('bluess');
// 处理未选中状态的逻辑
console.log('开关已关闭');
}
});</script>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注