用CSS和JQ分别实现switch button的多种方法

重写以前的demo是一件非常好的事情

1、用css实现switch button

基本原理：使用input的checkbox类型，当input被鼠标点击checked的时候通过 input:checked + .slide的方法在样式里让其向右移动100px，而当鼠标再次点击input没有被checked的时候，则样式失效，.slide回到原来的位置。

注意点：CSS样式中 + 号的意义，如果h1 + p 表示的意思就是和h1同级的标签里紧接着也就是边上的邻近h1的p标签被选中。另一个注意点是css的伪类，比如.slide是input的邻近兄弟元素，而当.slide用css伪类的时候，.slide:before同样也会被当成.slide的邻近兄弟元素。

这里插一个巨坑

这里插一个巨坑，把我坑了整整一天半啊，整整一天半啊！！！关于transition的使用，它的前两个属性是name和duration这两个属性，但是如果你想要在position:absolute;的情况下过渡地实现left:100px;的时候，这个时候这个时候一定要注意，那就是一定在transition那个样式栏里出现left属性和它的值，如果不出现的话并且只写all的话，这个过渡效果不出现的，是不出现的！简写害死人啊！简写害死人啊啊啊！！！

这里还有就是transition只对block元素生效。

接着之前的话，具体例子如下：

input:checked + .slide:before{
      left:50px;
    }
input:checked + .slide{
    background:blue;
}

被input被checked的时候，.slide和它的伪类的样式都会生效。再次点击失效，这是一种纯CSS的方法，有点讨巧。需要注意的是label标签的for

<label for="btn">
  <input type="checkbox" id="btn">
</label>

这样写的好处是当点击到标签本身时，input也会被checked，当然不写也是行的，只要label住input也会有同样的效果。

2、用jQuery实现switch button的两种方法

这两种方法其实差不多，一种是用toggleClass()来添加和删除className，另一种则是用toggle()来显示和隐藏身边的东西来实现左右位移。

• 关于toggleClass()的方法

$('.div1').click(function(){
      $('.div1').toggleClass('move')
})

在.move里添加相应的移动即可。

• 关于toggle()的办法

$('.div3').click(function(){
      $('.div2').toggle()
})

在html里写好两个div，并且把它们横向包在一个div里，然后通过显示和隐藏其中一个div来实现另一个div的移动。