tab切换很常见了，基本就是两种情况
1：点击不同的的tab选项，选项对应的内容改变css样式(或者js),
2：不断点击当前按钮，选项对应的内容改变css样式(或者js),
基于这个原理，我们来做个tab切换，两个情况都包含有的，就拿QQ音乐来说吧
点击不同的单曲，会自播放 ，不断点击当前歌曲，会播放暂停切换，我们要完成的就是这个事情
那怎么搞呢，我们可以给歌曲列表设置一个变量啊，通过它来控制歌曲的播放和暂停，说干就干
首先来一个b,如果播放，那b就是true,否则，那就暂停，这样应该就行了
var b=false;
function play(){
if(!b) {
audio.play();
b=true;
} else {
audio.pause();
b=false;
}
}
这样没问题了，b也能在点击的过程中在不断改变值了，棒棒哒~~
呃~~坑自己倒是很在行嘛。。。。。
如果你也是这样想的，啥也不说了，直接看这么写的效果吧
看到没有，点击当前播放了，点击下一首，他先是暂停状态的，你要再点一下才会播放 。
显然是有问题，我们需要点击每一首的那一刻它都要播放，点击这首歌的时候，音乐播放，这个b他是true，我再点别的歌可不就是false嘛
那么咋办呢，
说下解决办法，这次是真的说解决办法了，不忽悠了
我们可以给歌曲列表设置新的属性或者样式，我们在这里就给设置一个新的属性吧，有的时候就移除，没有就添加，这样应该就行了
吃瓜的：别“应该”啊，你一说应该我就怕怕o(╯□╰)o
我：。。。。。。
好吧，设置一个sel属性，给他父元素添加属性（其实这样为了更加方便一点而已，因这个页面东西稍微多一点），但原理是还是给当前的元素添加属性
var sel = $(this).parents('.music_item ').attr('sel')；
if(!sel) {
$(this).parents('.music_item ').attr('sel','select').siblings().removeAttr('sel');
audio.play();
} else {
audio.pause();
$(this).parents('.music_item ').removeAttr('sel');
}
这样就大功告成了，实现一开始要的效果了
页面的元素，每一首歌的时候，刚开始都是播放的，点击当前的按钮，按钮所在的父元素li也在来回的添加删除"sel"样式
