tab-set.html

<template>
    <ul class="nav nav-tabs">
        <li role="presentation" click.delegate="$parent.selectTab(tab)" repeat.for="tab of tabs" class="${ $parent.selectedTab === tab ? 'active' : '' }"><a href="#">${ tab.heading }</a></li>
    </ul>
    <div style="margin-top:8px">
        <content></content>
    </div>
</template>

tab-set.ts

import {sync, bindable} from 'aurelia-framework';

@sync({ name: "tabs", selector: "tab" })
export class TabSet {
    tabs: any[] = [];
    @bindable selectedTab: any = null;
    @bindable selectedIndex: number = 0;
    @bindable tabChanged: any;

    bind(ctx) {
        this["$parent"] = ctx;
    }

    selectedTabChanged() {
        this.onTabChanged();
    }

    tabsChanged() {
        if (this.tabs.length > 0) {
            if (this.selectedIndex >= this.tabs.length)
                this.selectedTab = this.tabs[0];
            else
                this.selectedTab = this.tabs[this.selectedIndex];
        }
        else
            this.selectedTab = null;   

        this.updateVisibility();
    }

    onTabChanged() {
        if (this.tabChanged)
            this.tabChanged(this.selectedTab);
    }

    selectTab(tab: any) {
        this.selectedTab = tab;

        // Find tab index
        var i = 0;
        this.tabs.forEach(t => { if (t === this.selectedTab) this.selectedIndex = i; i++ })

        this.updateVisibility();
    }

    updateVisibility() {
        this.tabs.forEach(tab => {
            tab.visible = tab === this.selectedTab;
        });
    }
}

tab.html

<template>
    <div class="${ visible ? '' : 'hidden' }">
        <content>
        </content>
    </div>
</template>

tab.ts

import {bindable} from 'aurelia-framework';

export class Tab {
    @bindable heading:string = "Tab";
    visible: boolean = false;

    bind(ctx) {
        this["$parent"] = ctx;
    }

}

usage.html

<template>
  <!-- Some view model... -->
  <tab-set>
    <tab heading="Tab 1">
      <p>Hello world!</p>
    </tab>
    <tab heading="Tab 2">
      <p>Hello another world!</p>
    </tab>
  </tab-set>
</template>

@adriatic, the tabs are hide/show so the tabs themselves are all in the DOM, so they don't lose state