Simple JS tabs with Backbone

_tabs.scss

.Tabs-tabs {
		@extend .u-inlineList;
	}

	.Tabs-tab {

	}

		.Tabs-link {
			&:hover,
			&:focus {
				background: rgba($purple, 0.5);
				color: $white;
			}
			&:active {
				background: darken($purple, 20%);
			}
			.Tabs-tab--active & {
				background: $purple;
				color: $white;
			}
		}

.Tabs-content--hidden {
	display: none;
}

tabs.js

define(["jquery", "underscore"], function($, _) {
	var Tabs = function(view) {
		_.bindAll(this, 'onMenuClick');
		this.view = view;
		this.$container = view.$el;
		this.$container.on('click', '.Tabs .Tabs-link', this.onMenuClick);

		var hrefs = [];
		this.$container.find('.Tabs .Tabs-link').each(function(n, val) { hrefs.push($(this).attr('href')); });
		if ( _(hrefs).contains(window.location.hash) )
			this.showTab(window.location.hash.substr(1));
		else
			this.showTab(hrefs[0].substr(1));
	};

	Tabs.prototype.onMenuClick = function(e) {
		var id = $(e.currentTarget).attr('href').substr(1);
		this.showTab(id);

		e.preventDefault();
	};

	Tabs.prototype.showTab = function(id) {
		this.$container.find('.Tabs-tabs .Tabs-link[href="#' + id + '"]').closest('.Tabs-tab').addClass('Tabs-tab--active');
		this.$container.find('.Tabs-tabs .Tabs-link').not('[href="#' + id + '"]').closest('.Tabs-tab').removeClass('Tabs-tab--active');

		this.$container.find('.Tabs-contents .Tabs-content').not('#' + id).addClass('Tabs-content--hidden');
		this.$container.find('.Tabs-contents .Tabs-content#' + id).removeClass('Tabs-content--hidden');

		this.view.trigger('tab.show', id);
	};
	return Tabs;
});

usage.js

//usage example in a backbone view: one view that has subviews, each in a tab

define(["backbone", "underscore", "tabs", "yoloview", "osefview"],
	function(Backbone, _, tabs, YoloView, OsefView) {

	var MyView = Backbone.View.extend({

		template: [
			'<div class="Tabs">',
				'<ul class="Tabs-tabs">',
					'<li class="Tabs-tab"><a class="Tabs-link Button" href="#yolo">Poil</a></li>',
					'<li class="Tabs-tab"><a class="Tabs-link Button" href="#osef">Ananas</a></li>'
				'</ul>',
				'<div class="Tabs-contents">',
					'<div id="yolo" class="Tabs-content"></div>',
					'<div id="osef" class="Tabs-content"></div>'
				'</div>',
			'</div>'
		].join(''),

		initialize: function(options) {
			this.data = options.data;

			this.initDOM();

			var subViewOpts = { data: this.data };
			this.subViews = {
				"yolo": new YoloView( _.extend(subViewOpts, { el: this.$('#yolo') }) ),
				"osef": new OsefView( _.extend(subViewOpts, { el: this.$('#osef') }) )
			};

			_.bindAll(this, 'render');

			this.render();

			this.data.on('filterData', this.render);
			this.on('tab.show', this.render);
		},

		initDOM: function() {
			this.$el.html( this.template );
			new tabs(this);
		},

		render: function() {
			if (this.subViews) {
				_(this.subViews).each(function(subView) {
					if (!subView.$el.hasClass('Tabs-content--hidden'))
						subView.render();
				});
			}
		}
	});
	return MyView;
});