开/关切换按钮 — 分步指南

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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/20700/32100700