title: Time interval set CSS class
body: <p>I got a question regarding switching classes with JQuery. In my case I have 4 hyperlinks within a list. What I want is the following:</p>
  
  <p>In initial state my first hyperlink got the class: "active":</p>
  
  <p><img src="https://i.stack.imgur.com/ndka5.png" alt="first link active"></p>
  
  <p>But after a time interval I want that the class "active" is  removed from hyperlink1 and added to link2. The same process also for hyperlink 3 and 4.</p>
  
  <p>So that there is always one hyperlink which got the black background-color:
  <img src="https://i.stack.imgur.com/2ymIp.png" alt="enter image description here"></p>
  
  <p>Another requirement is that whenever it reaches the last hyperlink (link 4) it should start again with link 1.</p>
  
  <p>How can I do this? This is what I have so far: <a href="https://jsfiddle.net/f6ktje52/1/" rel="nofollow noreferrer">https://jsfiddle.net/f6ktje52/1/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="tab-slide"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a  href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a  href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a  href="#"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$(function() {    
      $('.tab-slide li').first().addClass('active');
      setInterval(function() {                
           $('.tab-slide li').next('li').addClass('active');
      }, 1000);
  });
  </code></pre>