設置時間間隔CSS類

我有一個關於使用JQuery切換類的問題。在我的情況下，我有一個列表中有4個超鏈接。我想是這樣的：設置時間間隔CSS類

在初始狀態，我的第一個超鏈接得到了類：「活動」：

first link active

但時間間隔後，我想那類「活動」從刪除超鏈接1並添加到鏈接2。同樣的過程也爲超鏈接3和4

所以總有一個超鏈接，其得到了黑色的背景色： enter image description here

另一個要求是，每當它到達最後一個超鏈接（鏈接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); 
});

來源

2015-05-11 Rotan075

這是其他解決方法：

$(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

來源

2015-05-11 08:55:15 kosmos

然後接受@ kmsdev的答案 – divy3993

我想但我有一個5分鐘的時間限制來接受答案;）@ divy3993 – Rotan075

我很高興如果它是你正在尋找和它的作品 – kosmos

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); 
});

來源

2015-05-11 08:52:33

您的jsFiddle示例不會重新突出顯示第一項 - 可能需要快速修復;-) – toomanyredirects

這正是我想要的。但我仍然有一個問題。每當循環結束時，它就開始爲超鏈接2設置「活動」類。但是如果我想讓循環再次以超鏈接1開始，該怎麼辦？ – Rotan075

搞定它，給我一分鐘:) –

嘗試

$(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

來源

2015-05-11 08:59:28

你可以嘗試這樣的事：

$(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); 
});

來源

2015-05-11 09:10:17 IoviX

設置時間間隔CSS類

回答

相關問題