时间间隔设置CSS类

Question

我有一个关于使用JQuery切换类的问题。在我的情况下，我在列表中有4个超链接。我想要的是以下内容：

在初始状态下，我的第一个超链接得到了课程：＆＃34;活跃＆＃34;：

但是经过一段时间后，我希望课程“活跃”＃34;从hyperlink1中删除并添加到link2。超链接3和4的过程相同。

因此总会有一个超链接获得黑色背景颜色：

另一个要求是，无论何时到达最后一个超链接（链接4），它都应该从链接1开始。

我该怎么做？这是我到目前为止：https://jsfiddle.net/f6ktje52/1/

HTML

<ul class="tab-slide">
    <li><a href="#">Link 1</a></li>
    <li><a  href="#">Link 2</a></li>
    <li><a  href="#">Link 3</a></li>
    <li><a  href="#">Link 4</a></li>
</ul>

JQuery的

$(function() {    
    $('.tab-slide li').first().addClass('active');
    setInterval(function() {                
         $('.tab-slide li').next('li').addClass('active');
    }, 1000);
});

Answer 1

以下是其他解决方法：

$(function() {    
    var i = 0;
    var $target = $('.tab-slide li');

    setInterval(function(){
        $target.removeClass('active');
        $target.eq(i).addClass('active');
        if( i == $target.length - 1 ) i = 0;
        else i++;
    }, 1000);
});

Check the jsFiddle

Answer 2

https://jsfiddle.net/f6ktje52/7

JavaScript代码：

$(function() {
    $('.tab-slide li:nth-of-type(1)').addClass('active');

    var i = 1;
    var amount = $('.tab-slide li').length;

    setInterval(function() {   
        if(i > amount) {
            i = 1;
        }

        $('.tab-slide li').removeClass('active');
        $('.tab-slide li:nth-of-type('+i+')').addClass('active');

        i++;
    }, 1000);
});

Answer 3

尝试

$(function() {    
    $('.tab-slide li').first().addClass('active');
    var i = 1;
    setInterval(function(index) { 

         $('.tab-slide li').removeClass('active');
         $('.tab-slide li').eq(i).addClass('active');
         i++;
        if(i === $('.tab-slide li').length){
            i = 0;
        }


    }, 1000);
});

Fiddle

Answer 4

你可以尝试这样的事情：

$(function() {    
   var list = $('.tab-slide li');
   var i = 0;

   setInterval(function() { 
      $('.tab-slide li.active').removeClass('active');
      $(list[i]).addClass('active');
      i = i < list.length - 1 ? (i+1) : 0;
   }, 1000);
});