开/关切换按钮 — 分步指南
开/关切换按钮 — 分步指南
HTML
对于 HTML，我们有一个圆圈，它在点击和“FF”文本时触发一个 toggle() 函数，它将变为“N”，反之亦然。
<div class="container">
<div class="toggle" onclick="toggle()">
<div class="circle"></div>
</div>
<span class="text">法郎</span>
</div>
JAVASCRIPT
对于 javascript，首先我们将创建一个变量，我们将在其中存储切换状态。我们现在将其设置为 false。
让活跃=假
现在我们将创建一个切换功能，它将在单击圆圈时触发。开始时，我们使用 querySelector 方法选择切换和文本元素。然后我们将活动状态更改为与其当前值相反的状态，通过在它前面设置感叹号（“！”）（！活动）。如果 active 为 true，现在将变为 false，反之亦然。现在，如果 active 为 true，我们将添加活动类来切换元素并将“FF”文本更改为“N”。如果为 false，我们将删除切换元素的活动类并将文本设置为“FF”。
功能切换（）{
让切换 = document.querySelector('.toggle')
让 text = document.querySelector('.text')
活跃=！活跃 如果（主动）{
toggle.classList.add('active')
text.innerHTML = 'N'
} 别的 {
toggle.classList.remove('活动')
text.innerHTML = 'FF'
}
}
CSS
对于 CSS，我们将从设置文本元素的字体大小和颜色开始。
。文本 {
字体大小：23px；
颜色：#494949；
}
Toggle 元素将相对定位为 40x20px 大小（是圆形的两倍宽——我们稍后会设置）。我们将圆形边框设置为暗灰色，就像关闭了切换一样。然后我们将使用 flexbox 在中心显示所有内容。最后，我将光标设置为指针，因为该元素是可点击的，触发了开/关按钮，并且我正在添加过渡，以便切换非常流畅。
.toggle {
位置：相对；
宽度：40px；
高度：20px；
边框：2px 实心 #494949;
边框半径：20px；
显示：弯曲；
证明内容：中心；
对齐项目：居中；
光标：指针；
过渡：.3s；
}
圆将绝对定位，左侧设置为零。这是关闭状态。我们将宽度和高度设置为 20 像素（它的父级的一半宽度）。现在添加一些边框半径并将背景颜色设置为深灰色。单击切换时，此颜色将变为绿色。不要忘记转换。
。圆圈 {
位置：绝对；
左：0；
宽度：20px；
高度：20px；
边框半径：20px；
背景颜色：#494949；
过渡：.3s；
}
现在我们正在设置活动类的样式。当活动状态时，这个类被添加到切换元素。我们只需将边框颜色设置为绿色。
。积极的 {
边框颜色：rgb(85, 227, 180);
}
现在我们将使用加号选择器（“+”）选择同级并将其颜色设置为绿色。我们在这里谈论“N”文本。
.active + .text {
颜色：RGB（85、227、180）；
}
最后，我们将在活动时设置圆的样式。我们将通过将 left 属性设置为 100% 并将 X 平移 -100% 将其移动到容器的右侧。我们还将背景颜色更改为绿色和添加一些过渡。
.active .circle {
左：100%；
变换：translateX（-100%）；
过渡：.3s；
背景颜色：rgb(85, 227, 180);
}
就是这样。
您可以找到视频教程和源代码 这里 .
感谢您的阅读。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
