HTML如何实现开关按钮？toggle效果怎么做？

checkbox

<label>

for

id

<label class="toggle-switch">
  <input type="checkbox" id="myToggle">
  <span class="slider round"></span>
</label>

/* 隐藏原生复选框 */
.toggle-switch input {
  opacity: 0; /* 或者 display: none; 但 opacity: 0; 更好，因为它仍然在DOM流中，可被tab键选中 */
  width: 0;
  height: 0;
}

/* 轨道样式 */
.toggle-switch .slider {
  position: relative;
  cursor: pointer;
  display: block; /* 或者 inline-block */
  width: 60px; /* 轨道宽度 */
  height: 34px; /* 轨道高度 */
  background-color: #ccc; /* 未选中时的背景色 */
  transition: .4s; /* 动画过渡 */
  border-radius: 34px; /* 圆角轨道 */
}

/* 滑块样式 */
.toggle-switch .slider:before {
  position: absolute;
  content: "";
  height: 26px; /* 滑块高度 */
  width: 26px; /* 滑块宽度 */
  left: 4px; /* 初始位置 */
  bottom: 4px; /* 初始位置 */
  background-color: white; /* 滑块颜色 */
  transition: .4s; /* 动画过渡 */
  border-radius: 50%; /* 圆形滑块 */
}

/* 复选框选中时的样式变化 */
.toggle-switch input:checked + .slider {
  background-color: #2196F3; /* 选中时的背景色 */
}

/* 复选框选中时滑块的位置 */
.toggle-switch input:checked + .slider:before {
  transform: translateX(26px); /* 移动滑块 */
}

/* 圆角滑块 */
.toggle-switch .slider.round {
  border-radius: 34px;
}

.toggle-switch .slider.round:before {
  border-radius: 50%;
}

document.getElementById('myToggle').addEventListener('change', function() {
  if (this.checked) {
    console.log('开关已打开');
    // 执行打开时的操作，例如：document.body.classList.add('dark-mode');
  } else {
    console.log('开关已关闭');
    // 执行关闭时的操作，例如：document.body.classList.remove('dark-mode');
  }
});

width: 0; height: 0;

width

height

border-radius

position: relative;

position: absolute;

left

transform: translateX()

transition

.4s

input:checked + .slider

.slider:before

cursor: pointer;

slider

input:focus + .slider

input type="checkbox"

click

const toggleSwitch = document.getElementById('myToggle');

toggleSwitch.addEventListener('change', function() {
  // this.checked 会返回 true（选中）或 false（未选中）
  if (this.checked) {
    // 当开关处于“开”状态时执行的代码
    console.log("功能已开启！");
    // 举例：
    // localStorage.setItem('darkModeEnabled', 'true');
    // document.documentElement.setAttribute('data-theme', 'dark');
  } else {
    // 当开关处于“关”状态时执行的代码
    console.log("功能已关闭！");
    // 举例：
    // localStorage.setItem('darkModeEnabled', 'false');
    // document.documentElement.setAttribute('data-theme', 'light');
  }
});

true

false

enableDarkMode()

disableDarkMode()

isToggled = true/false

<div class="custom-toggle" id="myCustomToggle" role="switch" aria-checked="false" tabindex="0">
  <div class="custom-slider"></div>
</div>

<!-- 假设使用Bootstrap的开关组件 -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">默认开关</label>
</div>