tab通用自动切换,通过属性控制切换动作...

Question

问题描述：
   如标题，通过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");
};

Answer 1

围观中…………