Pestañas verticales con JQuery?

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

¿Es complicado conseguir que las pestañas verticales funcionen en todos los navegadores o es tan trivial que, una vez que tiene una solución, no parece que valga la pena publicar código de ejemplo?

Eche un vistazo a la documentación de pestañas verticales de jQuery UI . Lo probé, 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>

Intenta aquí:

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

Una mirada a la pestaña Libertad puede tener lo que necesita.

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

He creado un menú vertical y pestañas que cambian en el medio de la página. Cambié dos palabras en la fuente del código y separé 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();
});

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

simplemente agregue el estilo CSS de abajo

<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

No esperaría que las pestañas verticales necesiten un Javascript diferente de las pestañas horizontales. Lo único que sería diferente es el CSS para presentar las pestañas y el contenido de la página. JS para pestañas generalmente no hace más que mostrar / ocultar / tal vez cargar contenido.

Otra opción es el complemento de pestañas jQuery mb.extruder de Matteo Bicocchi: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/

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

función súper simple que te permitirá crear tu 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');