使用jQuery自动滚动选项卡

Question

我在下面发布了一个标签列表代码。

                              //TabList
                              <ul id="tabs" class="nav nav-tabs" role="tablist">
                                <li role="presentation" class="active">
                                    <a id="t1"  href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab"></a>
                                </li>
                                <li role="presentation">
                                    <a id="t2" href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab"></a>
                                </li>
                                <li role="presentation">
                                    <a id="t3" href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab"></a>
                                </li>
                                <li role="presentation">
                                    <a id="t4" href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab"></a>
                                </li>

                            </ul>     

每个标签都有一张照片和一些信息。我想每隔5秒自动滚动每个标签，然后在到达结束时从第一个标签开始。

使用setInterval函数（下面列出）我可以使它工作，但信息不会改变。那是因为它没有为超链接添加活动类。

//setInterval Function

     setInterval(function () {     
        //get currently-on tab
        var onTab = tabs.filter('.active');            
        //click either next tab, if exists, else first one
        var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
        nextTab.click();
    }, 1000); 

  var tabs = $('#tabs li');

   //on click to tab, turn it on, and turn previously-on tab off
    tabs.click(function () {      
        $(this).addClass('active').siblings('.active').removeClass('active');                    

        }


    });         

为了使用显示选项卡更改时的信息，我使用此代码。

tabs.click(function () {   

            var curr = $('li.active');
            curr.removeClass('active');     
            curr.next().find("a").click();
            curr.next().addClass('active');

    });         

问题是当它到达结束时它不会回到开始我已经查看堆栈溢出的答案，如this但无法让它工作。我觉得我无法看到森林里的树木，这是一个简单的答案。任何帮助将不胜感激。

Answer 1

var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();

嗨哟:)这里当你得到最后一个元素时，你应该将'active'类添加到你的第一个元素列表:) Smth就像：

var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first().addClass('active');