基于jQuey的tab切换,qq音乐播放器

tab切换很常见了，基本就是两种情况

1：点击不同的的tab选项，选项对应的内容改变css样式(或者js),

2：不断点击当前按钮，选项对应的内容改变css样式(或者js),

基于这个原理，我们来做个tab切换，两个情况都包含有的，就拿QQ音乐来说吧

点击不同的单曲，会自播放 ，不断点击当前歌曲，会播放暂停切换，我们要完成的就是这个事情

那怎么搞呢，我们可以给歌曲列表设置一个变量b啊，通过它来控制歌曲的播放和暂停，说干就干

首先来一个b,如果播放，那b就是true,否则，那就暂停，这样应该就行了

var b=false;

function play(){

if(!b) {                    
           audio.play();   

          b=true;              

       } else {
            audio.pause();
             b=false;

    }

}

这样没问题了，b也能在点击的过程中在不断改变值了，棒棒哒~~

如果你也是这样想的，啥也不说了，直接看这么写的效果吧

看到没有，点击当前歌曲播放了，但是点击其他首，先是暂停状态的，你要再点一下才会播放 。

显然是有问题的，点击当前，这个变量b他是true，我再点别的歌可不就是false嘛

我：坑自己很在行嘛

吃瓜的：。。。。。。

 

那咋整，

说下解决办法，这次是真的说解决办法了，不忽悠了，着急去吃饭

我们可以给歌曲列表设置一个属性或者样式，我们在这里就给设置一个新的属性吧，有这个属性的时候就移除，没有就添加，这样应该就行了

吃瓜的：别“应该”啊，你一说应该我就怕怕

我：。。。。。。

好吧，给按钮的父元素添加一个sel属性（这样是为更加方便控制而已，因为我这个页面东西稍微多一点，我就加在他老爸身上了），但原理依然是通过这个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"样式