easy bind tab navigation.

mytory-bind-tab-navigation.js

/**
 * ex)
 * bind_tab_navigation({
 *       target: ".family-site__a",
 *       prev: '.brand-page-last',
 *       prev_pre_event: function(){
 *           $('.brand-page-content').show();
 *       },
 *       next: '.family-site-first',
 *       next_pre_event: function(){
 *           $('.family-site-content-wrap').show();
 *       }
 *   });
 * @param obj
 */
function bind_tab_navigation(obj){
    var default_obj = {
        target: null,
        prev: null,
        prev_pre_event: null,
        prev_post_event: null,
        next: null,
        next_pre_event: null,
        next_post_event: null
    };
    var opt = $.extend(default_obj, obj);

    $(opt.target).keydown(function(e){

        // shift + tab
        if(opt.prev_pre_event && e.shiftKey && e.keyCode == 9){
            opt.prev_pre_event();
        }
        if(opt.prev && e.shiftKey && e.keyCode == 9){
            e.preventDefault();
            $(opt.prev).focus();
    }
        if(opt.prev_post_event && e.shiftKey && e.keyCode == 9){
            opt.prev_post_event();
        }

        // tab
        if(opt.next_pre_event && ! e.shiftKey && e.keyCode == 9){
            opt.next_pre_event();
        }
        if(opt.next && ! e.shiftKey && e.keyCode == 9){
            e.preventDefault();
            $(opt.next).focus();
        }
        if(opt.next_post_event && ! e.shiftKey && e.keyCode == 9){
            opt.next_post_event();
        }
    });
}