Fixed tabs behaviour

public/js/app/views/servers/view.js

@@ -1,7 +1,7 @@
 define(function (require) {
-  
+
   "use strict";
-  
+
   var $                   = require('jquery'),
       _                   = require('underscore'),
       Backbone            = require('backbone'),
@@ -9,21 +9,30 @@ define(function (require) {
       Mods                = require('app/collections/mods'),
       InfoView            = require('app/views/servers/info'),
       ModsListView        = require('app/views/mods/list'),
-      tpl                 = require('text!tpl/servers/view.html');    
-  
+      tpl                 = require('text!tpl/servers/view.html');
+
   return Marionette.Layout.extend({
     template: _.template(tpl),
-    
+
     regions: {
-      info: "#info",
-      mods: "#mods",
-      settings: "#settings"
+      info: "#tab-info",
+      mods: "#tab-mods",
+      settings: "#tab-settings"
     },
-    
+
+    events: {
+      "click .nav-tabs a" : "tabs",
+    },
+
     onRender: function() {
       this.info.show(new InfoView({model: this.model}));
       this.mods.show(new ModsListView({collection: new Mods(this.model.get('mods'))}));
     },
+
+    tabs: function(e) {
+      e.preventDefault()
+      $($(e.target).attr('href')).tab('show')
+    },
   });
-  
-});
+
+});

public/js/tpl/servers/view.html

@@ -2,14 +2,14 @@
 
 <!-- Nav tabs -->
 <ul class="nav nav-tabs">
-  <li class="active"><a href="#info" data-toggle="tab">Info</a></li>
-  <li><a href="#mods" data-toggle="tab">Mods</a></li>
-  <li><a href="#settings" data-toggle="tab">Settings</a></li>
+  <li class="active"><a href="#tab-info" data-toggle="tab">Info</a></li>
+  <li><a href="#tab-mods" data-toggle="tab">Mods</a></li>
+  <li><a href="#tab-settings" data-toggle="tab">Settings</a></li>
 </ul>
 
 <!-- Tab panes -->
 <div class="tab-content">
-  <div class="tab-pane active" id="info"></div>
-  <div class="tab-pane" id="mods"></div>
-  <div class="tab-pane" id="settings"></div>
+  <div class="tab-pane active" id="tab-info"></div>
+  <div class="tab-pane" id="tab-mods"></div>
+  <div class="tab-pane" id="tab-settings"></div>
 </div>