我尝试用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

请帮帮我.提前谢谢你。