为了账号安全,请及时绑定邮箱和手机立即绑定

如何连接两个选项和切换开关按钮

如何连接两个选项和切换开关按钮

慕仙森 2023-01-06 09:43:51

http://img2.sycdn.imooc.com/63b77d0b0001315003310067.jpg

我想连接两个标签和拨动开关。如果单击切换开关,则希望在单击相应标签时激活开关。但是,如果您单击同一个标签,则不希望开关移动。

我沿着这个链接做了一个切换开关https://www.w3schools.com/howto。这个按钮很好用。但我不知道该怎么做才能达到我想要的效果。我尝试在标签中放置两个选项,但布局被破坏了。

我不能使用其他框架,例如 jQuery。提供纯 JavaScript 支持。

/* The switch - the box around the slider */

.switch {

  position: relative;

  display: inline-block;

  width: 60px;

  height: 34px;

}


/* Hide default HTML checkbox */

.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}


/* The slider */

.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: .4s;

  transition: .4s;

}


.slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: .4s;

  transition: .4s;

}


input:checked + .slider {

  background-color: #2196F3;

}


input:focus + .slider {

  box-shadow: 0 0 1px #2196F3;

}


input:checked + .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}


/* Rounded sliders */

.slider.round {

  border-radius: 34px;

}


.slider.round:before {

  border-radius: 50%;

}

<label class="switch">

  <input type="checkbox">

  <span class="slider round"></span>

</label>


查看完整描述

2 回答

?
慕的地10843

TA贡献1574条经验 获得超8个赞

用 JavaScript 解决这个问题很简单,但用纯 CSS/HTML 解决这个问题会更有趣。


说明:pointer-events: none禁止点击产生任何影响。有选择地用于子元素以重新启用单击它们,pointer-events: all具体取决于checked.input


/* the interesting bit */


.label {

  pointer-events: none;

  display: flex;

  align-items: center;

}


.switch,

.input:checked + .label .left,

.input:not(:checked) + .label .right {

  pointer-events: all;

  cursor: pointer;

}


/* most of the stuff below is the same as the W3Schools stuff,

   but modified a bit to reflect changed HTML structure */


.input {

  display: none;

}


.switch {

  position: relative;

  display: inline-block;

  width: 60px;

  height: 34px;

}


.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: 0.4s;

  transition: 0.4s;

}


.slider:before {

  position: absolute;

  content: "";

  height: 26px;

  width: 26px;

  left: 4px;

  bottom: 4px;

  background-color: white;

  -webkit-transition: 0.4s;

  transition: 0.4s;

}


input:checked + .label .slider {

  background-color: #2196f3;

}


input:focus + .label .slider {

  box-shadow: 0 0 1px #2196f3;

}


input:checked + .label .slider:before {

  -webkit-transform: translateX(26px);

  -ms-transform: translateX(26px);

  transform: translateX(26px);

}


.slider.round {

  border-radius: 34px;

}


.slider.round:before {

  border-radius: 50%;

}


/* styling to make it look like your screenshot */


.left, .right {

  margin: 0 .5em;

  font-weight: bold;

  text-transform: uppercase;

  font-family: sans-serif;

}

<input class="input" id="toggle" type="checkbox">


<label class="label" for="toggle">

  <div class="left">

    Option A

  </div>


  <div class="switch">

    <span class="slider round"></span>

  </div>


  <div class="right">

    Option B

  </div>

</label>


查看完整回答
反对 回复 2023-01-06
?
HUH函数

TA贡献1567条经验 获得超4个赞

这将帮助您完美地使用两个单选按钮。


HTML :-


 <div class="normal-container">

  <div class="smile-rating-container">

    <div class="smile-rating-toggle-container">

      <form class="submit-rating">

        <input id="meh"  name="satisfaction" type="radio" />

        <input id="fun" name="satisfaction" type="radio" />

        <label for="meh" class="rating-label rating-label-meh">Bad</label>

        <div class="smile-rating-toggle"></div>

        <div class="toggle-rating-pill"></div>

        <label for="fun" class="rating-label rating-label-fun">Fun</label>

      </form>

    </div>

  </div>

</div>

CSS:-


    .smile-rating-container {

    position: relative;

    height: 10%;

    min-width: 220px;

    max-width: 520px;

    margin: auto;

    font-family: 'Roboto', sans-serif;

    top: 20%;

}

.submit-rating {

    display: flex;

    align-items: center;

    justify-content: center;

}

.rating-label {

    position: relative;

    font-size: 1.6em;

    text-align: center;

    flex: 0.34;

    z-index: 3;

    font-weight: bold;

    cursor: pointer;

    color: grey;

    transition: 500ms;

}

.rating-label:hover, .rating-label:active {

    color: grey;

}

.rating-label-fun {

    left: -58px;

    text-align: right;

}

.rating-label-meh {

    left: 58px;

    text-align: left;

    color: #222;

}

.smile-rating-container input {

    display: none;

}

.toggle-rating-pill {

    position: relative;

    height: 65px;

    width: 165px;

    background: grey;

    border-radius: 500px;

    transition: all 500ms;

}

.smile-rating-toggle {

    position: absolute;

    width: 54px;

    height: 54px;

    background-color: white;

    left: 182px;

    border-radius: 500px;

    transition: all 500ms;

    z-index: 4;

}

/*

Toggle Changes

*/


#meh:checked~.rating-label-meh {

 color: #2196f3;

}

#fun:checked~.rating-label-meh {

 color: grey;

}

#fun:checked~.mouth {

 border: 4px solid #2196f3;

 border-bottom-color: rgba(1, 1, 1, 0);

 border-right-color: rgba(1, 1, 1, 0);

 border-left-color: rgba(1, 1, 1, 0);

 top: 23px;

 left: 291px;

 transform: rotateX(180deg);

 border-radius: 100%;

}

 #fun:checked~.rating-label-fun {

 color: #2196f3;

}

#fun:checked~.smile-rating-toggle {

 left: 282px;

}

 #fun:checked~.rating-eye-left {

 left: 292px;

}

#fun:checked~.rating-eye-right {

 left: 316px;

}

 #fun:checked~.toggle-rating-pill {

 background-color: #2196f3;

}

 #fun:checked~.rating-eye {

 background-color: #2196f3;

}


查看完整回答
反对 回复 2023-01-06
  • 2 回答
  • 0 关注
  • 15 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信