jQuery點擊標籤系列中的隨機錨標籤

Question

我有五個錨標籤。我想要創建一個循環，在每5秒鐘後，應該使用Jquery點擊隨機標籤。它應該是無限的。

這是我的HTML代碼。

<ul class="nav-tabs-slideshow"> 
      <li><a href="#panel-1"><strong>Study with umdc</strong><br /> 
       <span>Study Hard. Play Hard</span> 
       </a> 
      </li> 
      <li> 
       <a href="#panel-2"><strong>Messages</strong><br /> 
       <span>We prepare you to wild world</span> 
       </a> 
      </li> 
      <li> 
       <a href="#panel-3"><strong>Vision & Mission</strong><br /> 
       <span>Discovery &amp; Innovation</span> 
       </a> 
      </li> 
      <li> 
       <a href="#panel-4"><strong>Newsroom</strong><br /> 
       <span>Latest campus news update</span> 
       </a> 
      </li> 
      <li> 
       <a href="#panel-5"><strong>Events</strong><br /> 
       <span>Schedule of our activity</span> 
       </a> 
      </li> 
     </ul> 

每種幫助將不勝感激。

Answer 1

//隨機點擊

jQuery(document).ready(function(e) { 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t jQuery(document).on({ 
 
\t \t \t mouseenter: function() { 
 
\t \t \t \t jQuery('.nav-tabs-slideshow').addClass('mouseenter1'); 
 
\t \t \t }, 
 
\t 
 
\t \t \t mouseleave: function() { 
 
\t \t \t \t jQuery('.nav-tabs-slideshow').removeClass('mouseenter1'); 
 
\t \t \t } 
 
\t \t }, '.nav-tabs-slideshow'); 
 
\t \t 
 
\t \t setInterval(function(){ 
 
\t \t \t 
 
\t \t \t if(!jQuery('.nav-tabs-slideshow').hasClass('mouseenter1')){ 
 
\t \t \t \t click1 = Math.floor((Math.random() * jQuery('.nav-tabs-slideshow li').length)); \t \t \t console.log(click1);// for Check 
 
\t \t \t \t jQuery('.nav-tabs-slideshow li:eq('+click1+') a').trigger('click'); 
 
\t \t \t \t jQuery('.nav-tabs-slideshow li:eq('+click1+') a').css({'color':'red'}); 
 
\t \t \t } 
 
\t \t \t \t 
 
\t \t \t 
 
\t \t },1000); 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav-tabs-slideshow"> 
 
     <li><a href="#panel-1"><strong>Study with umdc</strong><br /> 
 
     <span>Study Hard. Play Hard</span> </a> </li> 
 
     <li> <a href="#panel-2"><strong>Messages</strong><br /> 
 
     <span>We prepare you to wild world</span> </a> </li> 
 
     <li> <a href="#panel-3"><strong>Vision & Mission</strong><br /> 
 
     <span>Discovery &amp; Innovation</span> </a> </li> 
 
     <li> <a href="#panel-4"><strong>Newsroom</strong><br /> 
 
     <span>Latest campus news update</span> </a> </li> 
 
     <li> <a href="#panel-5"><strong>Events</strong><br /> 
 
     <span>Schedule of our activity</span> </a> </li> 
 
    </ul>

jQuery(document).ready(function(e) { 
 
\t \t 
 
\t \t var click1 = 0; 
 
\t \t setInterval(function(){ 
 
\t \t \t if(jQuery('.nav-tabs-slideshow li').length == click1) 
 
\t \t \t { 
 
\t \t \t \t click1 = 0; \t 
 
\t \t \t } \t \t \t 
 
\t \t \t jQuery('.nav-tabs-slideshow li:eq('+click1+') a').trigger('click'); 
 
\t \t \t jQuery('.nav-tabs-slideshow li:eq('+click1+') a').css({'color':'red'});// this is only for demo 
 
\t \t \t click1 ++; \t 
 
\t \t \t 
 
\t \t },5000); 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="nav-tabs-slideshow"> 
 
    <li><a href="#panel-1"><strong>Study with umdc</strong><br /> 
 
    <span>Study Hard. Play Hard</span> </a> </li> 
 
    <li> <a href="#panel-2"><strong>Messages</strong><br /> 
 
    <span>We prepare you to wild world</span> </a> </li> 
 
    <li> <a href="#panel-3"><strong>Vision & Mission</strong><br /> 
 
    <span>Discovery &amp; Innovation</span> </a> </li> 
 
    <li> <a href="#panel-4"><strong>Newsroom</strong><br /> 
 
    <span>Latest campus news update</span> </a> </li> 
 
    <li> <a href="#panel-5"><strong>Events</strong><br /> 
 
    <span>Schedule of our activity</span> </a> </li> 
 
</ul>