问题描述：
如标题，通过data-toggle="autoplay*" 和data-speed 属性控制页面tab切换的自动滚动状态
给.tab添加和属性一样的class之后，遍历思路乱了，， 各位帮看看~
思路：
1.通过data-toggle 属性值分别给.tab添加和属性值对应的class, 然后根据不同的class去遍历子元素li，
通过 data-speed 获取切换间隔时间 从而实现切换
HTML：
<div class="tab" data-toggle="autoplay1" data-speed="2000">
<div class="tab-head">
<ul>
<li class="active"><a href="#tab-start1">html</a> </li>
<li><a href="#tab-css1">css</a> </li>
</ul>
</div>
<div class="tab-body>
<div class="tab-panel active" id="tab-start1">
html
</div>
<div class="tab-panel" id="tab-css1">
css
</div>
</div>
<div class="tab" data-toggle="autoplay2" data-speed="1500">
....
</div>$(".tab .tab-head li").each(function () {
var e = $(this);
var trigger = e.closest(".tab").attr("data-toggle");
var filterplay = e.closest('.tab').attr('data-toggle').match(/^autoplay.*/)+'';
if(e.closest('.tab').attr('data-toggle') ==filterplay ){
$('.tab[data-toggle='+filterplay+''+']').addClass(filterplay);
}
}
......
function autoplay() {
n++;
if(n > xx.length) n = 0;
changetab(n);
}
function changetab(obj) {
for(var i=0,len=xx.length;i<len;i++){
$(xx[i]).removeClass("active");
$(xxx[i]).removeClass("active");
}
$(xx[n]).addClass("active");
$(xxx).eq(n).addClass("active");
};
添加回答
举报
0/150
提交
取消