Tabs: Use aria-controls instead of the anchor's href to match against location.hash. Fixes #8660 - Tabs: Set initial active tab from location hash for ajax tabs.

Author: scottgonzalez

tests/unit/tabs/tabs_options.js

@@ -7,7 +7,7 @@ var disabled = TestHelpers.tabs.disabled,
 module( "tabs: options" );
 
 test( "{ active: default }", function() {
-	expect( 4 );
+	expect( 6 );
 
 	var element = $( "#tabs1" ).tabs();
 	equal( element.tabs( "option", "active" ), 0, "should be 0 by default" );
@@ -19,6 +19,12 @@ test( "{ active: default }", function() {
 	equal( element.tabs( "option", "active" ), 2, "should be 2 based on URL" );
 	state( element, 0, 0, 1 );
 	element.tabs( "destroy" );
+
+	location.hash = "#custom-id";
+	element = $( "#tabs2" ).tabs();
+	equal( element.tabs( "option", "active" ), 3, "should be 3 based on URL" );
+	state( element, 0, 0, 0, 1, 0 );
+	element.tabs( "destroy" );
 	location.hash = "#";
 });
 

ui/jquery.ui.tabs.js

@@ -51,7 +51,8 @@ $.widget( "ui.tabs", {
 		var panel,
 			that = this,
 			options = this.options,
-			active = options.active;
+			active = options.active,
+			locationHash = location.hash.substring( 1 );
 
 		this.running = false;
 
@@ -80,9 +81,9 @@ $.widget( "ui.tabs", {
 
 		if ( active === null ) {
 			// check the fragment identifier in the URL
-			if ( location.hash ) {
-				this.anchors.each(function( i, anchor ) {
-					if ( anchor.hash === location.hash ) {
+			if ( locationHash ) {
+				this.tabs.each(function( i, tab ) {
+					if ( $( tab ).attr( "aria-controls" ) === locationHash ) {
 						active = i;
 						return false;
 					}