問題描述:
???如標(biāo)題,通過data-toggle="autoplay*"?和data-speed?屬性控制頁面tab切換的自動滾動狀態(tài)
???給.tab添加和屬性一樣的class之后,遍歷思路亂了,,?各位幫看看~
思路:
???1.通過data-toggle?屬性值分別給.tab添加和屬性值對應(yīng)的class,?然后根據(jù)不同的class去遍歷子元素li,
?????通過?data-speed?獲取切換間隔時間?從而實現(xiàn)切換
?????
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");
};
tab通用自動切換,通過屬性控制切換動作...
asdf00001
2017-01-18 22:38:32