tab.coffee

$.fn.extend
  tabs: (options) ->
    # Default settings
    settings =
      duration: 500

    # Merge default settings with options.
    settings = $.extend settings, options

    $(@).on('click',(e)->
        e.preventDefault()
        link = @.href
        link = link.split('#')[1]

        if $(@).attr('data-tab') is 'active'

        else
          $('[data-tab-contents="active"]').fadeOut(settings.duration,->
            $(@).attr('data-tab-contents','hide')
            $(@).attr('aria-hidden','true')
            $('#'+link).fadeIn(settings.duration,->
              $(@).attr('data-tab-contents','active')
              $(@).attr('aria-hidden','false')
            )
          )


          $('[data-tab="active"]').attr('data-tab','hide')
          $('[data-tab="active"]').attr('aria-selected','false')

          $(@).attr('data-tab','active')
          $(@).attr('aria-selected','true')

    )

test.jade

          ul.tab(role="tablist").js-tabs
            li(role="presentation")
              a(id="tabaaa" href="#aaa" role="tab" aria-controls="tabAAA" aria-selected="true" data-tab="active").tab__list 本社
            li(role="presentation")
              a(id="tabbbb" href="#bbb" role="tab" aria-controls="tabBB" aria-selected="false" data-tab="hide").tab__list 支店


        section(data-tab-contents="active" role="tabpanel" aria-labelledby="aaaTab" aria-hidden="false")#aaa