jonahoffline/jsbin.uvovug.css

## jsbin.uvovug.css
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.nav-tabs > li.active a {
  color: red;
}

## jsbin.uvovug.html
<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Ember Component: Tabs" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>

<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

  <script type="text/x-handlebars">
  {{#x-tabs}}
    {{#x-pane title="One"}}
      I am some content!
    {{/x-pane}}
    {{#x-pane title="Two"}}
      I am some child content!
    {{/x-pane}}
  {{/x-tabs}}
  </script>


  <script type="text/x-handlebars" id="components/x-tabs">
  <div class="tabbable">
    <ul class="nav nav-tabs">
      {{#each pane in panes}}
      <li {{bindAttr class="pane.selected:active"}}>
        <a href="#" {{action select pane}}>{{pane.title}}</a>
      </li>
      {{/each}}
    </ul>
    <div class="tab-content">
      {{yield}}
    </div>
  </div>
  </script>

  <script type="text/x-handlebars" id="components/x-pane">
    <div class="tab-pane" {{bindAttr class="selected:active"}}>
      {{yield}}
    </div>
  </script>
</body>
</html>

## jsbin.uvovug.js
var App = Ember.Application.create();

App.XTabsComponent = Ember.Component.extend({
  init: function() {
    this._super.apply(this, arguments);
    this.panes = [];
  },

  addPane: function(pane) {
    if (this.get('panes.length') == 0) this.select(pane);
    this.panes.pushObject(pane);
  },

  select: function(pane) {
    this.set('selected', pane);
  }

});

App.XPaneComponent = Ember.Component.extend({
  didInsertElement: function() {
    this.get('parentView').addPane(this);
  },

  selected: function() {
    return this.get('parentView.selected') === this;
  }.property('parentView.selected')
});
	.tab-pane {
	display: none;
	}

	.tab-pane.active {
	display: block;
	}

	.nav-tabs > li.active a {
	color: red;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Ember Component: Tabs" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>

	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>

	<script type="text/x-handlebars">
	{{#x-tabs}}
	{{#x-pane title="One"}}
	I am some content!
	{{/x-pane}}
	{{#x-pane title="Two"}}
	I am some child content!
	{{/x-pane}}
	{{/x-tabs}}
	</script>


	<script type="text/x-handlebars" id="components/x-tabs">
	<div class="tabbable">
	<ul class="nav nav-tabs">
	{{#each pane in panes}}
	<li {{bindAttr class="pane.selected:active"}}>
	<a href="#" {{action select pane}}>{{pane.title}}</a>
	</li>
	{{/each}}
	</ul>
	<div class="tab-content">
	{{yield}}
	</div>
	</div>
	</script>

	<script type="text/x-handlebars" id="components/x-pane">
	<div class="tab-pane" {{bindAttr class="selected:active"}}>
	{{yield}}
	</div>
	</script>
	</body>
	</html>
	var App = Ember.Application.create();

	App.XTabsComponent = Ember.Component.extend({
	init: function() {
	this._super.apply(this, arguments);
	this.panes = [];
	},

	addPane: function(pane) {
	if (this.get('panes.length') == 0) this.select(pane);
	this.panes.pushObject(pane);
	},

	select: function(pane) {
	this.set('selected', pane);
	}

	});

	App.XPaneComponent = Ember.Component.extend({
	didInsertElement: function() {
	this.get('parentView').addPane(this);
	},

	selected: function() {
	return this.get('parentView.selected') === this;
	}.property('parentView.selected')
	});