html5 简单实用好看的滑动开关Jquery+css带效果图（无bug）
HTML5 滑动开关可以使用一些现成的JavaScript库来实现，例如bootstrap-switch或ion.rangeSlider。以下是使用bootstrap-switch库的一个简单示例：
- 首先，在HTML文件中引入必要的CSS和JavaScript文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slide Switch Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
</head>
<body>
<input type="checkbox" name="my-switch" id="my-switch" data-size="small" data-on-text="On" data-off-text="Off">
<script>
$(document).ready(function() {
$('#my-switch').bootstrapSwitch();
});
</script>
</body>
</html>- 在
<head>标签中，通过<link>标签引入bootstrap-switch的CSS文件，通过<script>标签引入jQuery和bootstrap-switch的JavaScript文件。 - 在
<body>中，添加一个普通的<input type="checkbox">元素，并设置一个ID。 - 在
<script>标签中，使用jQuery的$(document).ready()函数来初始化滑动开关。
这个简单的例子展示了如何使用bootstrap-switch库来创建一个滑动开关。你可以通过调整data-size属性的值来改变滑动按钮的大小，data-on-text和data-off-text属性来分别设置开启和关闭时按钮上显示的文字。
评论已关闭