Question

我有以下代码来点击多个标签。但是，有没有办法让标签每4秒自动更改一次。

$(document).ready(function() {


    $('ul.tabs li').click(function () {
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
    });

});

Answer 1

使它成为一个很好的功能;

function changeTabs(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
}

调用该函数的javascript计时器;

setInterval(function(){ changeTabs(); }, 4000);

然后你也可以随时保持点击;

$('ul.tabs li').click(function () {
    changeTabs();
});

Answer 2

您可以使用setInverval函数，该函数会在等待一段时间后重复执行某个函数。

查看http://www.w3schools.com/jsref/met_win_setinterval.asp

setInterval和setTimeout之间的区别在于setInterval将执行每个代码块，比如X，秒。但是，setTimeout将执行代码，然后等待X秒再次执行代码并重置延迟。

Answer 3

setInterval每个标签都会被激活。

$.each($('ul.tabs li'), function(i, el){

   setTimeout(
   function() 
   {
   //wait for tabs then go
   }, 0+(i*4000));
   // start turn
   setInterval(function(){
       var tab_id = $(this).attr('data-tab');
       $('ul.tabs li').removeClass('current');
       $('.tab-content').removeClass('current');
       $(this).addClass('current');
       $("#" + tab_id).addClass('current');
   },4000);
});

Answer 4

查看setInterval

你可以这样做：

$(document).ready(function() {
   var lis = $('ul.tabs li');
   var tab_id = 1;
   var changeTab = function(){
      console.log(tab_id);
      $('ul.tabs li').removeClass('current');
      $('.tab-content').removeClass('current');
          
      $("#" + tab_id).parent().addClass('current');
      tab_id=tab_id%lis.length + 1;
  }
      
  var intervalID = window.setInterval(changeTab, 4000);
});

.current{
  display: block !important;
}
ul.tabs li{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="tabs">
      <li class="current"><span id="1" class="tab-content">111111</span></li>
      <li><span id="2" class="tab-content">222222</span></li>
      <li><span id="3" class="tab-content">333333</span></li>
    </ul>

如何使用JQuery自动滚动选项卡

4 个答案: