Add extra CSS class to tab content wrapper with the id of the tab

In CSS it is not currently possible to select an element based on
whether it has certain child or not, nor select the parent element of
another one. In certain cases it may be necessary to use a special style
for the tab content wrapper element, for example to remove the padding
from the wrapper and left the tab content element itself to handle it.
To support that now the tab content wrapper has the "tab-{tabId}" CSS
class in addition to the "tab" CSS class.

Another option would have been to make possible to specify the class
name to use when a tab was added so the same class could be used by the
wrapper when showing different tabs. However this seem like an uncommon
use case, and there should not be a lot of tabs anyway, so the current
approach would not require a lot of ".tab-{tabId1}", ".tab-{tabId2}",
".tab-{tabId3}"... selectors for the same rules in the CSS files anyway.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

js/views/tabview.js

@@ -326,9 +326,16 @@
 		 * @param string tabId the ID of the selected tab.
 		 */
 		onChildviewSelectTabHeader: function(tabId) {
+			if (this._selectedTabExtraClass) {
+				this.getRegion('tabContent').$el.removeClass(this._selectedTabExtraClass);
+			}
+
 			// With Marionette 3.1 "this.detachChildView('tabContent')" would be
 			// used instead of the "preventDestroy" option.
 			this.showChildView('tabContent', this._tabContentViews[tabId], { preventDestroy: true } );
+
+			this._selectedTabExtraClass = 'tab-' + tabId;
+			this.getRegion('tabContent').$el.addClass(this._selectedTabExtraClass);
 		}
 
 	});