在同一页上连接两个深色模式按钮,可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<button id="button1" class="dark-mode-button">深色模式按钮1</button>
<button id="button2" class="dark-mode-button">深色模式按钮2</button>
CSS:
.dark-mode-button {
background-color: #333;
color: #fff;
/* 其他样式属性 */
}
JavaScript:
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
button1.addEventListener('click', toggleDarkMode);
button2.addEventListener('click', toggleDarkMode);
function toggleDarkMode() {
// 切换深色模式的逻辑
document.body.classList.toggle('dark-mode');
// 同步按钮状态
button1.classList.toggle('selected');
button2.classList.toggle('selected');
}
在上述示例中,我们创建了两个深色模式按钮,并为它们添加了点击事件监听器。当用户点击按钮时,会触发toggleDarkMode
函数,该函数会切换页面的深色模式,并更新按钮的选中状态。
请注意,上述示例中的代码仅用于演示如何在同一页上连接两个深色模式按钮,并不包含实际的深色模式切换逻辑。实际的深色模式切换逻辑可能涉及更多的代码和样式修改。
推荐的腾讯云相关产品和产品介绍链接地址:
请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云