example to bootstrap tabs switching out the tab and its contents

bootstrap_tabs.haml

#tabs
  %ul.nav.nav-tabs.nav-justified
    %li.active
      = link_to 'Quotes', '#quotes', data: { toggle: "tab" }
    %li
      = link_to 'Draft', '#drafts', data: { toggle: "tab" }
    %li
      = link_to 'Submitted', '#submitted', data: { toggle: "tab" }
    %li
      = link_to 'Accepted', '#accepted', data: { toggle: "tab" }
    %li
      = link_to 'In Production', '#in-production', data: { toggle: "tab" }
    %li
      = link_to 'Complete', '#complete', data: { toggle: "tab" }
    %li
      = link_to 'Cancelled', '#cancelled', data: { toggle: "tab" }
.tab-content
  #drafts.tab-pane
    = render 'sales_orders/table', sales_orders: @sales_orders

  #submitted.tab-pane
    = render 'sales_orders/table', sales_orders: @sales_orders
  #accepted.tab-pane
    = render 'sales_orders/table', sales_orders: @sales_orders
  #in-production.tab-pane
    = render 'sales_orders/table', sales_orders: @sales_orders
  #complete.tab-pane
    Complete
  #cancelled.tab-pane
    = render 'sales_orders/table', sales_orders: @sales_orders
  #quotes.tab-pane.active
    = render 'sales_orders/table', sales_orders: @sales_orders