style - pestañas jQuery, use como menú, cargue la página cuando haga clic en el enlace

jquery tabs select tab

Question

He agregado pestañas jQuery a mi sitio web. Hasta ahora no hay problema

Pero quiero, al hacer clic en una pestaña, que funcione y se comporte como un enlace normal.

Examinar 1: mira este enlace http://jqueryui.com/demos/tabs/default.html . Al hacer clic en las opciones:

• Nunc tincidunt
• Proin dolor
• Aenean lacinia

Carga el contenido del mismo archivo y la URL es estática (default.html).

Quiero lo siguiente:

Examen 2: al hacer clic en

• Nunc tincidunt (por ejemplo, nunc.php)
• Proin dolor (por ejemplo, proin.php)
• Aenean lacinia (por ejemplo, aenean.php)

Quiero que la página del agujero se vuelva a cargar. Al hacer clic en la pestaña "Nunc tincidunt" debería cargarse nunc.php (y la URL debería cambiarse), al hacer clic en "Proin dolor" debería cargar proin.php, y así sucesivamente.

¿Cómo debo lograr esto?

Answer 1

¿Quieres extraer el contenido a través de ajax? Si es así, esto debería ayudar:

http://jqueryui.com/demos/tabs/ajax.html

Answer 2

No estoy seguro de lo que quiere que haga, pero si abre el enlace como una nueva página / reemplazo para la página actual, la documentación explica:

[Cómo ...] ... seguir la URL de una pestaña en lugar de cargar su contenido a través de ajax

Tenga en cuenta que abrir una pestaña en una nueva ventana es inesperado, por ejemplo, comportamiento incoherente que expone un problema de usabilidad ( http://www.useit.com/alertbox/tabs.html ).

$(''#example'').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, ''load.tabs'');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    } });

Ver http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

Answer 3

Seguramente es una cuestión de reemplazar tus enlaces (#) con tus enlaces .php y cambiar el ID de los enlaces para no hacer referencia a los de las pestañas?

Answer 4

Puede dar a los anclajes atributos href reales, como este:

<div id="tabs"> 
    <ul> 
        <li><a href="nunc.php">Nunc tincidunt</a></li> 
        <li><a href="proin.php">Proin dolor</a></li> 
        <li><a href="aenean.php">Aenean lacinia</a></li> 
    </ul>
</div>​​​​​​​​​​

De forma predeterminada, intentará cargar esas páginas a través de AJAX en la pestaña correspondiente. Para evitar este comportamiento, simplemente cambie la window.location la window.location usted mismo en el evento de select , como este:

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

Puede intentarlo aquí (tenga en cuenta que obtendrá páginas inesperadas / 404, ya que esos archivos PHP no están presentes en jsfiddle)