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"样式