如何将文本添加到此CSS“切换器"“拨动开关"

问题描述

这是实际的"Swticher"生成器: https://proto.io/freebies/onoff/

Here's the actual 'Swticher' Generator: https://proto.io/freebies/onoff/

我不清楚如何向事件中添加文本-因此，在默认情况下，当开关处于打开状态时，会显示某些文本，反之亦然.

I'm not clear on how to add text to the event - so when the switch is on default certain text is shown and vica versa.

这是HTML:

  <div class="onoffswitch">
      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
      <label class="onoffswitch-label" for="myonoffswitch">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
      </label>
  </div>

我试图将类添加到<p>标签，但没有欢乐.

I tried to add the class to a < p > tag but no joy.

感谢所有帮助.

推荐答案

您可以通过DevTools复制粘贴站点使用的CSS.无论如何，他们要做的是，最初将复选框设置为选中，这使左边距为0，这显示了具有"ON"文本的:: before伪元素.在未选中的情况下，margin-left设置为-100％，它显示:: after带有"OFF"文本的伪元素.

You can copy paste the css used by the site through DevTools. Anyways, what they do is, initially they set the checkbox to checked which makes the margin-left to be 0 which shows the ::before pseudo-element that has "ON" text. And on not checked, margin-left is set to -100% which shows ::after pseudo-element that has "OFF" text.

这是相关的CSS-

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-inner::before {
    content: "ON";
    padding-left: 10px;
    background-color: #34A7C1;
    color: #FFFFFF;
}

.onoffswitch-inner::after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE;
    color: #999999;
    text-align: right;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

这是JSFiddle中的整个代码- https://jsfiddle.net/0f4rbLmo/1/

Here's the entire code in JSFiddle - https://jsfiddle.net/0f4rbLmo/1/

如果要基于开关切换div，则可以定义隐藏的类，例如-

If you want to toggle a div based on the switch, you can define hidden class like -

.triggeredDiv.hidden {
  display: none;
}

然后在触发事件时根据javascript中的复选框值触发它.

And then trigger it based on checkbox value in javascript when event is fired.

function toggleDiv() {
  if (document.getElementById('myonoffswitch').checked) {
    document.querySelector('.triggeredDiv').classList.remove('hidden');
  } else {
    document.querySelector('.triggeredDiv').classList.add('hidden');
  }
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);

JSFiddle- https://jsfiddle.net/g7qm2txs/

JSFiddle - https://jsfiddle.net/g7qm2txs/

这篇关于如何将文本添加到此CSS“切换器"“拨动开关"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！