Pestañas verticales con JQuery?

Question

Quiero pestañas en el lado izquierdo de la página en lugar de en la parte superior. Ya estoy cargando jQuery por otros motivos (efectos), por lo que prefiero usar jQuery a otro marco de UI. Las búsquedas en "jquery de pestañas verticales" producen enlaces a trabajos en curso.

¿Es que las Pestañas Verticales funcionan con varios navegadores, o es tan trivial que, una vez que tiene una solución, no parece que valga la pena publicar un código de ejemplo?

Answer 1

No esperaba que las pestañas verticales necesitaran Javascript diferente de las pestañas horizontales. Lo único que sería diferente es el CSS para presentar las pestañas y el contenido en la página. JS for tabs generalmente no hace más que mostrar/ocultar/quizás cargar contenido.

Answer 2

Prueba aquí:

http://www.sunsean.com/idTabs/

Un vistazo a la pestaña de la Libertad podría tener lo que necesita.

Avísame si encuentras algo que te guste. Trabajé exactamente en el mismo problema hace unos meses y decidí implementarlo. Me gusta lo que hice, pero podría haber sido bueno usar una biblioteca estándar.

Answer 3

Eche un vistazo a Listamatic. Las pestañas son semánticamente solo una lista de elementos diseñados de una manera particular. Ni siquiera necesita necesariamente javascript para hacer que las pestañas verticales funcionen como muestran los diversos ejemplos en Listamatic.

Answer 4

He creado un menú vertical y las pestañas cambian en el medio de la página. He cambiado dos palabras de la fuente de código y Aparté dos divs diferentes

menú:

<div class="arrowgreen"> 
    <ul class="tabNavigation"> 
    <li> <a href="#first" title="Home">Tab 1</a></li> 
    <li> <a href="#secund" title="Home">Tab 2</a></li> 
    </ul> 
</div> 

contenido:

<div class="pages"> 
    <div id="first"> 
    CONTENT 1 
    </div> 
    <div id="secund"> 
    CONTENT 2 
    </div> 
</div> 

el código funciona con el div aparte

$(function() { 
    var tabContainers = $('div.pages > div'); 

    $('div.arrowgreen ul.tabNavigation a').click(function() { 
     tabContainers.hide().filter(this.hash).show(); 

     $('div.arrowgreen ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 

     return false; 
    }).filter(':first').click(); 
}); 

Answer 5

Eche un vistazo a the jQuery UI vertical Tabs Docu. Lo intento, funcionó bien.

<style type="text/css"> 
/* Vertical Tabs 
----------------------------------*/ 
.ui-tabs-vertical { width: 55em; } 
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
.ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 
</style> 

<script> 
    $(document).ready(function() { 
     $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix'); 
     $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left'); 

    }); 
</script> 

Answer 6

Otra de las opciones es mb.extruder pestañas jQuery de Matteo Bicocchi plug-in: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

Answer 7

//o_O\\ (Poker Face) i know its late 

sólo tiene que añadir beloww estilo CSS

<style type="text/css"> 

    /* Vertical Tabs ----------------------------------*/ 
.ui-tabs-vertical { width: 55em; } 
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
.ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} 

</style> 

ACTUALIZADO! http://jqueryui.com/tabs/#vertical

Answer 8

función muy sencilla que le permitirá crear su propia estructura de pestaña/acordeón aquí: http://jsfiddle.net/nabeezy/v36DF/

bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) { 
     //Dependent on jQuery 
     //PARAMETERS 
     //tabClass: 'the class name of the DOM elements that will be clicked', 
     //tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)', 
     //contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked', 
     //contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)', 
     //MUST call bindSets() after dom has rendered 

     var tabs = $('.' + tabClass); 
     var tabContent = $('.' + contentClass); 
     if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')}; 
     tabs.each(function (index) { 
      this.matchedElement = tabContent[index]; 
      $(this).click(function() { 
       tabs.each(function() { 
        this.classList.remove(tabClassActive); 
       }); 
       tabContent.each(function() { 
        this.classList.add(contentClassHidden); 
       }); 
       this.classList.add(tabClassActive); 
       this.matchedElement.classList.remove(contentClassHidden); 
      }); 
     }) 
     tabContent.each(function() { 
      this.classList.add(contentClassHidden); 
     }); 

     //tabs[0].click(); 
    } 
bindSets('tabs','active','content','hidden');