Abrir pestañas JQuery con URL y agregar un hash a la URL en la pestaña haga clic en

Question

Estoy trabajando en una aplicación web, y estoy usando el complemento JQuery UI Tabs para separar los datos.
Si ratón sobre cada una de las pestañas, en la parte inferior izquierda de la pantalla puedo ver la URL de esa pestaña (ex: testPage.com/#tab1 o testPage.com/#tab2)

Ahora, si escribo una de esas direcciones en la barra de URL, no voy a la pestaña relacionada con el hash en la URL, sino que voy a la primera pestaña de la aplicación.

Mi pregunta es: ¿Cómo podría anclar una pestaña específica a una URL?
Entonces, si alguien visita testPage.com/#tab3, terminará en la pestaña 3 de la aplicación.

Estoy haciendo esto también porque quiero utilizar el complemento JQuery BBQ para modificar el historial del navegador, de modo que pueda hacer que un usuario vaya a la última pestaña en la que estaba cuando hace clic en el botón Atrás.

Ejemplo:
http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/

Answer 1

Terminé usando el plugin de jQuery Dirección de Asual. Hice lo siguiente:

// For forward and back 
    $.address.change(function(event){ 
     $("#main_tabs").tabs("select" , window.location.hash); 
    }); 

    // when the tab is selected update the url with the hash 
    $("#main_tabs").bind("tabsselect", function(event, ui) { 
     window.location.hash = ui.tab.hash; 
    }); 

¡Espero que esto ayude a alguien! Gracias.

Answer 2

También puede intentarlo de la siguiente manera. Tengo la propiedad name en el elemento de anclaje. Este nombre se agregará como hash URL.

Javascript:

$("#tabs").tabs({ 
    select: function(event, ui) {     
     window.location.hash = ui.tab.hash;      
    } 
}); 

HTML:

<div id="tabs" > 
    <ul> 
     <li><a name="Test1" href="Home/Test1"> Tab 1 </a></li> 
     <li><a name="Test2" href="Home/Test2"> Tab 2 </a></li> 
     <li><a name="Test3" href="Home/Test3"> Tab 3 </a></li>    
    </ul>   
</div>