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

Pallab のコードに時計を追加しました。そのため、タイムアウト期間 (私の場合は 10 秒) の前に別のタブをクリックしても、現在のタブが 10 秒間表示され、タブは 5 秒後に自動的にタブになります。私は初心者なので、私のコーディングでご容赦ください。

2 つ以上のタブを一度に 1 つずつ、10 秒以内にクリックする必要があります。

// タブペイン変更関数

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 に答える
1

以下のコードを使用してタブ移動を一時停止できます

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

show:このイベントは、タブの表示時に発生しますが、新しいタブが表示される前に... -- http://getbootstrap.com/2.3.2/javascript.html#tabs

于 2013-09-04T06:39:20.357 に答える