4

我希望我的引导选项卡自动选项卡，但是当单击选项卡时，我希望选项卡暂停一段时间或完全停止。这是我正在使用的一段 javascript。

    var timer = null, 
    interval = 1000,
    value = 0;

$("#start").click(function() {
  if (timer !== null) return;
  timer = setInterval(function () {
      value = value+1;
      $("#input").val(value);
  }, interval); 
});

$("#stop").click(function() {
  clearInterval(timer);
  timer = null
});
4

3 回答 3

10

如果你还没有解决它......这是你可以检查的小提琴。

// Tab click event handler
$('a').on('click', function (e) {
    e.preventDefault();
    // Stop the cycle
    clearInterval(tabCycle);
    // Show the clicked tabs associated tab-pane
    $(this).tab('show');
    // Start the cycle again in a predefined amount of time
    setTimeout(function () {
        //tabCycle = setInterval(tabChange, 5000);
    }, 15000);
});

http://jsfiddle.net/ahLyZ/1/

于 2013-09-04T07:20:07.210 回答
1

您可以在以下代码的帮助下暂停选项卡

    $('a[data-toggle="tab"]').on('show', function (e) {
            //pause here               
    })

显示：此事件在选项卡显示时触发，但在显示新选项卡之前... -- http://getbootstrap.com/2.3.2/javascript.html#tabs

于 2013-09-04T06:39:20.357 回答
1

我已将时钟添加到 Pallab 的代码中。因此，即使在我的情况下为 10 秒的超时期限之前单击了不同的选项卡，当前选项卡将显示 10 秒，并且选项卡将在 5 秒后自动选项卡。我是初学者，所以请忍受我的编码。

您必须在不到 10 秒的时间内单击 2 个或更多选项卡，一次单击一个选项卡。

// Tab-Pane 改变函数

tabChange = function(){
    var tabs = $('.nav-tabs > li');
    var active = tabs.filter('.active');
    var next = active.next('li').length? active.next('li').find('a') : tabs.filter(':first-child').find('a');
    // Use the Bootsrap tab show method
    next.tab('show');
}    // Tab Cycle function
function settabchnge () {
    //alert("in set tab");
tabCycle = setInterval(tabChange, 5000);
}

settabchnge();

function cleartabchange () {
    clearInterval(tabCycle);
}

$(函数(){

    var counterofclock = 1;
    var counterofmoreclicks = 1; 
    var clicked = false;
    var sec = 0;
    function startClock() {
        if (clicked === false) {
            clock = setInterval(stopWatch, 1000);
            clicked = true;
        }else if (clicked === true) {
        }
    }       
    function stopWatch() {
            sec++;
    }
    function stopClock() {
            window.clearInterval(clock);
            sec = 0;
            clicked = false;
    }
    $('.nav-tabs a').click(function(e) {
        if(counterofclock === 1){
            startClock();
            counterofclock = 2;
        }else {
            stopClock();
            startClock();
        }
        e.preventDefault();
        // Stop the cycle
        if (counterofmoreclicks == 2 && sec < 11){
            clearTimeout(starttabchnage);
        }
        counterofmoreclicks = 2;
        clearInterval(tabCycle);
        // Show the clicked tabs associated tab-pane
        $(this).tab('show')
        // Start the cycle again in a predefined amount of time
        starttabchnage = setTimeout(function(){ settabchnge();}, 10000);
    });


})
于 2014-06-29T09:16:18.097 回答