如何用css制作切换标签

Question

我尝试用html、css、JavaScript制作切换标签。

这是我的代码，我试过了。

null

function genre_itemclick(item){
          if(item.classList.contains('light_blue_border_button')) {
              item.classList.remove('light_blue_border_button');
              item.classList.add('light_blue_button');
          }
          else{
              item.classList.remove('light_blue_button');
              item.classList.add('light_blue_border_button');
          }
  }

.light_blue_border_button{
    background-color: #FFFFFF;
    border-radius: 10px;
    height: 30px;
    border:2px solid #3CDEBF;
    text-align: center; 
    color: #3CDEBF;
}
.light_blue_button{
    background-color: #3CDEBF;
    border:2px solid #3CDEBF;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    color: #ffffff;      
}

<div class="light_blue_border_button" onclick="genre_itemclick(this)">test</div>

null

但我想用仅有的HTML和CSS来制作这个函数。所以我就这样试着。但它不起作用。

null

body {padding:60px;}

.toggle-switch input[type=checkbox] {display:none}
.toggle-switch label {cursor:pointer;}
.toggle-switch label{
    background-color: #FFFFFF;
    border-radius: 10px;
    height: 30px;
    border: 2px solid #3CDEBF; 
}

.toggle-switch input[type="checkbox"]:checked + label{
      background-color: #3CDEBF;
    border: 2px solid #3CDEBF;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    color: #ffffff;
}

<div class="toggle-switch">
  <input type="checkbox" id="chkTest" name="chkTest">
  <label>
    Test
  </label>
</div>

null

请帮帮我.提前谢谢你。

Answer 1

您可以使用checkbox并根据其选中状态对其进行样式设置。

然后我们使用一个标签来打开和关闭复选框。因为单击标签会自动聚焦相应的输入。

null

/* Default styling */
label {
    background-color: #FFFFFF;
    border-radius: 10px;
    height: 30px;
    border:2px solid #3CDEBF;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #3CDEBF;
    padding: 6px 9px 7px 8px;
    margin-top: 20px;
    margin-left: 8px;
    cursor: pointer;
}

/* Hide checkbox (we use the label the trigger the checkbox) */
#foo {
  display: none;
}

/* Styling when checkbox is checked */
#foo:checked + label {
    background-color: #3CDEBF;
    border:2px solid #3CDEBF;
    height: 30px;
    border-radius: 10px;
    text-align: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-left: 8px;
    padding: 6px 9px 7px 8px;
    cursor: pointer;
}

<input id="foo" type="checkbox" />
<label for="foo">test</label>