jquery响应式TAB选项卡切换特效代码

使用方法

(function() {
  'use strict';

  var focused     = 1;
  var keysActive  = false;
  var panel       = 'panel';
  var panelActive = 'tab-teaser__panel--active';
  var panels      = $('.js_tab-teaser__panel');
  var tab         = 'tab';
  var tabActive   = 'tab-teaser__tab--active';
  var tabs        = $('.js_tab-teaser__tab');
  var numTabs     = tabs.length; 
  
  // change active class + set aria-selected to true
  function switchTab(clickedTab) {
    var id = clickedTab.id.substring(tab.length, clickedTab.id.length);

    tabs.removeClass(tabActive);
    tabs.attr('aria-selected', false);
    $(clickedTab).addClass(tabActive);
    $(clickedTab).attr('aria-selected', true);
    panels.removeClass(panelActive);
    $('#' + panel + id).addClass(panelActive);
  }

  // focus tabs with left and right arrows
  function handleKeys(e) {

    keysActive = true;

    switch(e.keyCode) {
      // space
      case 32:
        switchTab($('#' + tab + focused)[0]);
        break;
      // left arrow 
      case 37:
        if (focused === 1) {
          focused = numTabs;
        } else {
          focused --;
        }
        $('#' + tab + focused).focus();
        break;
      // right arrow
      case 39:
        if (focused === numTabs) {
          focused = 1;
        } else {
          focused ++;
        }
        $('#' + tab + focused).focus();
        break;
    }
  }

  function killKeys() {
    // wait to see if focus switches to another tab
    window.setTimeout(function() {
      if (!tabs.is(':focus')) {
        $(window).off('keydown', handleKeys);  
        keysActive = false;
        focused = 1;
      }
    }, 100);
  }
  
  // Add Eventhandler
  tabs.on('click', function() {
    switchTab(this);
  }).on('focus', function() {
    if (!keysActive) {
      $(window).on('keydown', handleKeys);
    }
  }).on('focusout', killKeys);
})();