elementplus官网右上角的开关是怎么实现的

html-css012

elementplus官网右上角的开关是怎么实现的,第1张

ElementPlus官网右上角的开关是基于HTML和CSS来实现的。首先,利用HTML中的<input type="checkbox">这个标签来创建一个开关,然后通过CSS中不同的类来设置打开和关闭状态时开关背景图片的样式显示,最后使用JS代码来实现开关状态切换时对其他网页元素的操作。

css是没有点击效果的,所以没法只通过css来实现图片互换,可以实现鼠标移上去背景图互换,使用:hover,li{background:none} li:hover{background:red}。

点击效果必须使用js,当点击时,更改class。

按钮绑定一个点击事件,只是改变少量的样式使用$(".div").css("background","red")即可,如果是整个页面改变,就需要用到页面样式写缓存或数据库,重新加载页面来判断用户选择了那个样式,然后显示不同的样式加载