Question

我希望我的引导标签自动标签，但是当单击标签时，我希望标签暂停一段时间或完全停止。这是我正在使用的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
});

Answer 1

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

// 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/

Answer 2

您可以借助以下代码暂停标签

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

显示：此事件会在标签显示上触发，但在显示新标签之前 ... - http://getbootstrap.com/2.3.2/javascript.html#tabs

Answer 3

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

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

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


})

自动引导选项卡

3 个答案: