Pages

Les événements en action

Partie code :

var tabBtns = document.querySelectorAll('.tab-bar > .tab-btn');

      for(var i = 0; i < tabBtns.length; i++) {
        tabBtns[i].addEventListener('click', 
                    onTabClick(i, tabBtns[i]), true);
      }

      function onTabClick(index, btn) {
        return function(e) {
          currentSelectedTab = index;  
          selectTab(btn); 
        };
      }

      function selectTab(btn) {
        var currentTab = document.querySelector('.tab-bar > .tab-btn.selected');
        if(currentTab) {
          currentTab.classList.remove('selected');
        }
        btn.classList.add('selected');
      }

Partie test

var currentSelectedTab = 0;

countUp = function () {
    currentSelectedTab++;
    currentSelectedTab=currentSelectedTab%tabBtns.length;
    console.log( currentSelectedTab );
    selectTab(tabBtns[currentSelectedTab]);
};

var anim = setInterval( countUp, 1000 );

// on peut mettre un bouton : ici action sur le body
var stopBtn = document.querySelector('body');

stopBtn.addEventListener('click',function(){clearInterval(anim);},true);


JS Bin