Latest web development tutorials

jQuery UI ejemplo - pestañas (Tabs)

área de contenido individual de una de múltiples paneles, cada panel en el título de la lista.

Para más detalles sobre los componentes de pestañas, consulte la documentación de la API miembro de lengüeta (el widget aquí) .

La función predeterminada

Haga clic en la pestaña para cambiar se divide en una parte diferente de la lógica de contenido. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <title> pestañas jQuery UI (Tabs) - La función por defecto </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ();
  });
  </ Script>
</ Head>
<Cuerpo>
 
<div id = "pestañas">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "pestañas-1">
    <P> Proin elit arcu, commodo rutrum, vehicula tempus, COMMODO una, Risus. Arcu Curabitur nec. Donec sollicitudin mi sit amet mauris. Nam elementum quam Ullamcorper ante. Etiam aliquet Massa et ipsum. Mauris dapibus lacus auctor Risus. Aenean tempor Ullamcorper leo. Vivamus sed magna quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. nulla aliquam. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor ncp Orci tincidunt interdum. ipsum Phasellus. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "pestañas-2">
    <P> Morbi tincidunt, dúos sit amet facilisis feugiat, odio metus gesta ante, ut pharetra Massa metus Identificación del nunc. Fringilla Duis scelerisque molestie turpis. Sed, massa eget luctus malesuada, Metus eros molestie lectus, ut tempus eros Massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula en aliquam ligula suscipit. Praesent en eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mecenas feugiat, Tellus pellentesque pretium posuere, felis felis ipsum euismod, eu leo ​​ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "pestañas-3">
    <P> Mauris eleifend est et turpis. Duis Identificación del erat. Potenti Suspendisse. Aliquam vulputate, pede vel vehicula accumsan, mi ñeque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum no ante. Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu Risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus un lacus. </ p>
    <P> Duis cursus. Eros ligula Mecenas, ncp blandit, pharetra en, sempre en, magna. Nullam ac lacus. Facilisi Nulla. Praesent viverra Justo vitae ñeque. Praesent blandit adipiscing velita. Potenti Suspendisse. Mattis Donec, blandit pede vel pharetra, magna ligula faucibus eros, euismod Identificación del lacus dolor eget odio. scelerisque Nam. Donec no libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velita eu Tellus interdum rutrum. Mecenas commodo. Pellentesque ncp elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ver demo

contenido de plegamiento

Haga clic en la pestaña seleccionada para cambiar el contenido cerrada / abierta. Para activar esta función, es necesario configurar el collapsible opción de verdad. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <title> pestañas jQuery UI (Tabs) - Plegable contenido </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ({
      colapsable: true
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<div id = "pestañas">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "pestañas-1">
    <P> <strong> Haga clic en la pestaña de nuevo para cerrar el panel de contenido. </ Strong> </ p>
    <P> Proin elit arcu, commodo rutrum, vehicula tempus, COMMODO una, Risus. Arcu Curabitur nec. Donec sollicitudin mi sit amet mauris. Nam elementum quam Ullamcorper ante. Etiam aliquet Massa et ipsum. Mauris dapibus lacus auctor Risus. Aenean tempor Ullamcorper leo. Vivamus sed magna quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. nulla aliquam. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor ncp Orci tincidunt interdum. ipsum Phasellus. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "pestañas-2">
    <P> <strong> Haga clic en la pestaña de nuevo para cerrar el panel de contenido. </ Strong> </ p>
    <P> Morbi tincidunt, dúos sit amet facilisis feugiat, odio metus gesta ante, ut pharetra Massa metus Identificación del nunc. Fringilla Duis scelerisque molestie turpis. Sed, massa eget luctus malesuada, Metus eros molestie lectus, ut tempus eros Massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula en aliquam ligula suscipit. Praesent en eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mecenas feugiat, Tellus pellentesque pretium posuere, felis felis ipsum euismod, eu leo ​​ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "pestañas-3">
    <P> <strong> Haga clic en la pestaña de nuevo para cerrar el panel de contenido. </ Strong> </ p>
    <P> Duis cursus. Eros ligula Mecenas, ncp blandit, pharetra en, sempre en, magna. Nullam ac lacus. Facilisi Nulla. Praesent viverra Justo vitae ñeque. Praesent blandit adipiscing velita. Potenti Suspendisse. Mattis Donec, blandit pede vel pharetra, magna ligula faucibus eros, euismod Identificación del lacus dolor eget odio. scelerisque Nam. Donec no libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velita eu Tellus interdum rutrum. Mecenas commodo. Pellentesque ncp elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ver demo

Obtener el contenido a través de Ajax

Establecer el valor del vínculo href en una pestaña a pestaña de acceso a contenidos externos a través de Ajax. Cuando las peticiones Ajax a la espera de una respuesta, una pestaña a una "Cargando ...", cuando la carga se haya completado el retorno a la pestaña General.

Tag 3 y 4 muestran la lenta carga y daños a las etiquetas de AJAX, y cómo controlar los errores del lado del servidor en estas circunstancias. Tenga en cuenta que ambos requieren un servidor web puede explicar PHP. Ellos no trabajan fuera del sistema de archivos. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <title> pestañas jQuery UI (Tabs) - Obtener el contenido a través de Ajax </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ({
      beforeLoad: function (event, ui) {
        ui.jqXHR.error (function () {
          ui.panel.html (
            "No se puede cargar la cuenta. Si esto no es una demostración". +
            "Vamos a solucionar el problema tan pronto como sea posible.");
        });
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<div id = "pestañas">
  <Ul>
    <Li> <a href="#tabs-1"> precargado </a> </ li>
    <Li> <a etiqueta href="ajax/content1.html"> 1 </a> </ li>
    <Li> <a etiqueta href="ajax/content2.html"> 2 </a> </ li>
    <Li> <a etiqueta href="ajax/content3-slow.php"> 3 (lenta) </a> </ li>
    <Li> <a etiqueta href="ajax/content4-broken.php"> 4 (dañado) </a> </ li>
  </ Ul>
  <div id = "pestañas-1">
    <P> Proin elit arcu, commodo rutrum, vehicula tempus, COMMODO una, Risus. Arcu Curabitur nec. Donec sollicitudin mi sit amet mauris. Nam elementum quam Ullamcorper ante. Etiam aliquet Massa et ipsum. Mauris dapibus lacus auctor Risus. Aenean tempor Ullamcorper leo. Vivamus sed magna quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. nulla aliquam. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor ncp Orci tincidunt interdum. ipsum Phasellus. Nunc tristique tempus lectus . </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ver demo

Abierto cuando los elementos emergentes de ratón

Por event opción de cambiar las piezas cuando se pasa el ratón sobre el estado activado / desactivado. El valor por defecto es el evento "clic". 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <title> pestañas jQuery UI (Tabs) - Cuando se pasa el ratón sobre el </ title> abierto
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ({
      evento: "por encima del ratón"
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<div id = "pestañas">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "pestañas-1">
    <P> Proin elit arcu, commodo rutrum, vehicula tempus, COMMODO una, Risus. Arcu Curabitur nec. Donec sollicitudin mi sit amet mauris. Nam elementum quam Ullamcorper ante. Etiam aliquet Massa et ipsum. Mauris dapibus lacus auctor Risus. Aenean tempor Ullamcorper leo. Vivamus sed magna quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. nulla aliquam. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor ncp Orci tincidunt interdum. ipsum Phasellus. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "pestañas-2">
    <P> Morbi tincidunt, dúos sit amet facilisis feugiat, odio metus gesta ante, ut pharetra Massa metus Identificación del nunc. Fringilla Duis scelerisque molestie turpis. Sed, massa eget luctus malesuada, Metus eros molestie lectus, ut tempus eros Massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula en aliquam ligula suscipit. Praesent en eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mecenas feugiat, Tellus pellentesque pretium posuere, felis felis ipsum euismod, eu leo ​​ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "pestañas-3">
    <P> Mauris eleifend est et turpis. Duis Identificación del erat. Potenti Suspendisse. Aliquam vulputate, pede vel vehicula accumsan, mi ñeque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum no ante. Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu Risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus un lacus. </ p>
    <P> Duis cursus. Eros ligula Mecenas, ncp blandit, pharetra en, sempre en, magna. Nullam ac lacus. Facilisi Nulla. Praesent viverra Justo vitae ñeque. Praesent blandit adipiscing velita. Potenti Suspendisse. Mattis Donec, blandit pede vel pharetra, magna ligula faucibus eros, euismod Identificación del lacus dolor eget odio. scelerisque Nam. Donec no libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velita eu Tellus interdum rutrum. Mecenas commodo. Pellentesque ncp elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ver demo

La operación simple

Basta con añadir y quitar pestañas. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <title> pestañas jQuery UI (Tabs) - Operación simple </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Style>
  #dialog etiqueta, de entrada #dialog {display: block;}
  #dialog etiqueta {margin-top: 0.5em;}
  #dialog de entrada, área de texto #dialog {width: 95%;}
  #tabs {margin-top: 1 em;}
  #tabs li .ui-icono-close {float: left; margen: 0.4em 0.2em 0 0; cursor: puntero;}
  #add_tab {cursor: puntero;}
  </ Style>
  <Script>
  $ (Function () {
    var TabTitle = $ ( "#tab_title"),
      tabContent = $ ( "#tab_content"),
      tabTemplate = "<li> <a href='#{href}'> # {etiqueta} </a> <span class =" ui ui-icon-icono-close 'role = "presentación"> Eliminar Tab </ span > </ li> ",
      tabCounter = 2;
 
    var tabs = $ ( "") #tabs .tabs ();
 
    // Inicializar un cuadro de diálogo modal: El botón de reinicio y una forma interna "cierre" de diálogo de devolución de llamada var = $ ( "#dialog") .dialog Personalizar ({
      Autoopen: falso,
      modal: true,
      botones: {
        Añadir: function () {
          addTab ();
          $ (Este) .dialog ( "cerrar");
        },
        Cancelar: function () {
          $ (Este) .dialog ( "cerrar");
        }
      },
      Cerrar: function () {
        formar [0] .reset ();
      }
    });
 
    // AddTab formulario: Llamado al presentar la función addTab y cerrar el diálogo var = dialog.find forma ( "forma") .submit (function (event) {
      addTab ();
      dialog.dialog ( "cerrar");
      event.preventDefault ();
    });
 
    // Función real addTab: Utilice el formulario de arriba para agregar una nueva función de entrada addTab pestaña () {
      etiqueta var = tabTitle.val () || "Tab" + tabCounter,
        id = "tabs-" + tabCounter,
        Li = $ (tabTemplate.replace (/ # \ {href \} / g, "#" + id) .Colocar (/ # \ {label \} / g, etiqueta)),
        tabContentHtml = tabContent.val () || "Tab" + + tabCounter "contenido.";
 
      tabs.find ( ".ui-tabs-nav") .Append (li);
      tabs.append ( "<div id =" "+ ID +" "> <p>" + tabContentHtml + "</ p> </ div>");
      tabs.tabs ( "refresh");
      tabCounter ++;
    }
 
    // Botón addTab: El valor del cuadro de diálogo Abrir $ ( "#add_tab")
      .button ()
      .click (function () {
        dialog.dialog ( "abrir");
      });
 
    // Cerrar Icono: Retire la lengüeta tabs.delegate ( "span.ui-icono-close" cuando se hace clic, "clic", function () {
      var panelId = $ (this) .closest ( "li") .Remove attr () ( "aria-controles") .;
      $ ( "#" + PanelId) .Remove ();
      tabs.tabs ( "refresh");
    });
 
    tabs.bind ( "keyup", function (event) {
      si (event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE) {
        . Var panelId = tabs.find ( ".ui-tabs-activos") .Remove attr () ( "aria-controles");
        $ ( "#" + PanelId) .Remove ();
        tabs.tabs ( "refresh");
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "diálogo" title = "datos Tab">
  <Forma>
    <Clase Fieldset = "ui-helper-reset">
      <Label for = "TAB_TITLE"> Título </ label>
      <Input type = "text" name = "TAB_TITLE" id = valor "TAB_TITLE" = "" class = "ui-ui widget de-contenido-esquina-all">
      <Label for = "tab_content"> contenido </ label>
      <Textarea name = "tab_content" id = "tab_content" class = "ui-ui widget de-contenido-esquina-all"> </ textarea>
    </ Fieldset>
  </ Form>
</ Div>
 
<Botón id = "add_tab"> Añadir una pestaña </ botón>
 
<div id = "pestañas">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> <span class = "ui ui-icon-icono-cierre" role = "presentación"> Eliminar pestaña </ span> </ li>
  </ Ul>
  <div id = "pestañas-1">
    <P> Proin elit arcu, commodo rutrum, vehicula tempus, COMMODO una, Risus. Arcu Curabitur nec. Donec sollicitudin mi sit amet mauris. Nam elementum quam Ullamcorper ante. Etiam aliquet Massa et ipsum. Mauris dapibus lacus auctor Risus. Aenean tempor Ullamcorper leo. Vivamus sed magna quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. nulla aliquam. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor ncp Orci tincidunt interdum. ipsum Phasellus. Nunc tristique tempus lectus . </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ver demo

Ordenar (Asc)

Arrastre las pestañas de arriba para reordenarlos.

Simplemente llame .ui-tabs-nav elemento en .sortable() , puede dejar que las fichas se pueden ordenar. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <title> pestañas jQuery UI (Tabs) - clasificación (Asc) </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    var tabs = $ ( "") #tabs .tabs ();
    tabs.find ( "pestañas .ui-nav") .sortable ({
      eje: "x",
      detener: function () {
        tabs.tabs ( "refresh");
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<div id = "pestañas">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "pestañas-1">
    <P> Proin elit arcu, commodo rutrum, vehicula tempus, COMMODO una, Risus. Arcu Curabitur nec. Donec sollicitudin mi sit amet mauris. Nam elementum quam Ullamcorper ante. Etiam aliquet Massa et ipsum. Mauris dapibus lacus auctor Risus. Aenean tempor Ullamcorper leo. Vivamus sed magna quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. nulla aliquam. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor ncp Orci tincidunt interdum. ipsum Phasellus. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "pestañas-2">
    <P> Morbi tincidunt, dúos sit amet facilisis feugiat, odio metus gesta ante, ut pharetra Massa metus Identificación del nunc. Fringilla Duis scelerisque molestie turpis. Sed, massa eget luctus malesuada, Metus eros molestie lectus, ut tempus eros Massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula en aliquam ligula suscipit. Praesent en eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mecenas feugiat, Tellus pellentesque pretium posuere, felis felis ipsum euismod, eu leo ​​ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "pestañas-3">
    <P> Mauris eleifend est et turpis. Duis Identificación del erat. Potenti Suspendisse. Aliquam vulputate, pede vel vehicula accumsan, mi ñeque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum no ante. Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu Risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus un lacus. </ p>
    <P> Duis cursus. Eros ligula Mecenas, ncp blandit, pharetra en, sempre en, magna. Nullam ac lacus. Facilisi Nulla. Praesent viverra Justo vitae ñeque. Praesent blandit adipiscing velita. Potenti Suspendisse. Mattis Donec, blandit pede vel pharetra, magna ligula faucibus eros, euismod Identificación del lacus dolor eget odio. scelerisque Nam. Donec no libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velita eu Tellus interdum rutrum. Mecenas commodo. Pellentesque ncp elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ver demo

La parte inferior de la pestaña

Con un poco de CSS adicional (para el posicionamiento) y JS (colocado en el elemento de clase correcta), pestaña Jieke en la parte inferior del contenido. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <title> jQuery UI pestañas (Tabs) - en la parte inferior de la etiqueta </ ​​title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs ();
 
    // Modificar la clase
    $ ( ".tabs De fondo .ui-tabs-nav, .tabs de fondo .ui-pestañas de navegación por> *")
      .removeClass ( "ui-ui esquina todo-esquina-top")
      .addClass ( "ui-esquina inferior");
 
    navegación móvil en la parte extrema // $ ( ".tabs de fondo .ui-tabs-nav") .appendTo ( ".tabs-inferior");
  });
  </ Script>
  <Style>
  / * Forzado una altura, por lo que la lengüeta no cambia con la altura del contenido se cambia * /
  #tabs .tabs-espaciador {float: left; altura: 200px;}
  .tabs-inferior .ui-tabs-nav {clear: left; padding: 0 .2em .2em .2em;}
  .tabs-inferior .ui-tabs-nav li {top: auto; abajo: 0; margin: 0 0 .2em 1px; border-bottom: auto; border-top: 0;}
  .tabs de fondo .ui-pestañas de navegación por pestañas li.ui-activa {margin-top: 1px; padding-top: 1px;}
  </ Style>
</ Head>
<Cuerpo>
 
<Div id = "lengüetas" class = "pestañas de fondo">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <Div class = "pestañas-espaciador"> </ div>
  <div id = "pestañas-1">
    <P> Proin elit arcu, commodo rutrum, vehicula tempus, COMMODO una, Risus. Arcu Curabitur nec. Donec sollicitudin mi sit amet mauris. Nam elementum quam Ullamcorper ante. Etiam aliquet Massa et ipsum. Mauris dapibus lacus auctor Risus. Aenean tempor Ullamcorper leo. Vivamus sed magna quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. nulla aliquam. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor ncp Orci tincidunt interdum. ipsum Phasellus. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "pestañas-2">
    <P> Morbi tincidunt, dúos sit amet facilisis feugiat, odio metus gesta ante, ut pharetra Massa metus Identificación del nunc. Fringilla Duis scelerisque molestie turpis. Sed, massa eget luctus malesuada, Metus eros molestie lectus, ut tempus eros Massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula en aliquam ligula suscipit. Praesent en eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mecenas feugiat, Tellus pellentesque pretium posuere, felis felis ipsum euismod, eu leo ​​ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "pestañas-3">
    <P> Mauris eleifend est et turpis. Duis Identificación del erat. Potenti Suspendisse. Aliquam vulputate, pede vel vehicula accumsan, mi ñeque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum no ante. Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu Risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus un lacus. </ p>
    <P> Duis cursus. Eros ligula Mecenas, ncp blandit, pharetra en, sempre en, magna. Nullam ac lacus. Facilisi Nulla. Praesent viverra Justo vitae ñeque. Praesent blandit adipiscing velita. Potenti Suspendisse. Mattis Donec, blandit pede vel pharetra, magna ligula faucibus eros, euismod Identificación del lacus dolor eget odio. scelerisque Nam. Donec no libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velita eu Tellus interdum rutrum. Mecenas commodo. Pellentesque ncp elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ver demo

aquí verticales

Haga clic en la pestaña para cambiar se divide en una parte diferente de la lógica de contenido. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <title> pestañas jQuery UI (Tabs) - pestañas verticales </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Function () {
    $ ( "#tabs") .tabs () AddClass ( "ui-pestañas verticales-ui-helper-clearfix") .;
    $ ( "#tabs Li") .removeClass ( "ui-esquina-top") ( "izquierda-ui-esquina") .addClass;
  });
  </ Script>
  <Style>
  .ui-pestañas verticales {width: 55em;}
  .ui-pestañas verticales .ui-tabs-nav {padding: .2em .1em .2em .2em; float: left; anchura: 12em;}
  .ui-tabs-verticales .ui-tabs-nav li {clear: left; width: 100%; border-bottom-width: 1px importante; border-right-ancho :! 0 importante; margen de 0 1px .2em :! 0;
  .ui-pestañas verticales .ui-tabs-nav li a {display: block;}
  .ui-tabs-verticales .ui-pestañas de navegación por pestañas li.ui-activa {padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px;}
  .ui-tabs-verticales .ui-pestañas del panel {padding: 1 em; float: right; ancho: 40em;}
  </ Style>
</ Head>
<Cuerpo>
 
<div id = "pestañas">
  <Ul>
    <Li> <a href="#tabs-1"> Nunc tincidunt </a> </ li>
    <Li> <a href="#tabs-2"> Proin dolor </a> </ li>
    <Li> <a href="#tabs-3"> Aenean lacinia </a> </ li>
  </ Ul>
  <div id = "pestañas-1">
    <H2> Contenido Título 1 </ h2>
    <P> Proin elit arcu, commodo rutrum, vehicula tempus, COMMODO una, Risus. Arcu Curabitur nec. Donec sollicitudin mi sit amet mauris. Nam elementum quam Ullamcorper ante. Etiam aliquet Massa et ipsum. Mauris dapibus lacus auctor Risus. Aenean tempor Ullamcorper leo. Vivamus sed magna quis ligula adipiscing eleifend. Duis Orci. aliquam sodales tortor vitae ipsum. nulla aliquam. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. sed ut dolor ncp Orci tincidunt interdum. ipsum Phasellus. Nunc tristique tempus lectus . </ p>
  </ Div>
  <div id = "pestañas-2">
    <H2> título Contenido 2 </ h2>
    <P> Morbi tincidunt, dúos sit amet facilisis feugiat, odio metus gesta ante, ut pharetra Massa metus Identificación del nunc. Fringilla Duis scelerisque molestie turpis. Sed, massa eget luctus malesuada, Metus eros molestie lectus, ut tempus eros Massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula en aliquam ligula suscipit. Praesent en eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. aliquam erat volutpat. Pellentesque convallis. Mecenas feugiat, Tellus pellentesque pretium posuere, felis felis ipsum euismod, eu leo ​​ornare nisi vel felis. Mauris consectetur tortor et purus. </ p>
  </ Div>
  <div id = "pestañas-3">
    <H2> Contenido Título 3 </ h2>
    <P> Mauris eleifend est et turpis. Duis Identificación del erat. Potenti Suspendisse. Aliquam vulputate, pede vel vehicula accumsan, mi ñeque rutrum erat, eu congue Orci lorem eget lorem. Vestibulum no ante. Clase Aptent taciti sociosqu anuncio Litora torquent por conubia nostra , por inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu Risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, nec feugiat, luctus un lacus. </ p>
    <P> Duis cursus. Eros ligula Mecenas, ncp blandit, pharetra en, sempre en, magna. Nullam ac lacus. Facilisi Nulla. Praesent viverra Justo vitae ñeque. Praesent blandit adipiscing velita. Potenti Suspendisse. Mattis Donec, blandit pede vel pharetra, magna ligula faucibus eros, euismod Identificación del lacus dolor eget odio. scelerisque Nam. Donec no libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velita eu Tellus interdum rutrum. Mecenas commodo. Pellentesque ncp elit. Fusce en lacus. Vivamus un libero vitae lectus hendrerit hendrerit. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ver demo