javascript - example - vertical tabs css

Pestañas verticales con JQuery? (8)

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 funcionen en todos los 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?

Creé un menú vertical y las pestañas 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(); });

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.

Eche un vistazo a las fichas verticales jQuery UI Docu . Lo intento, funcionó bien.

Intenta aquí:

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

Un vistazo a la pestaña 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.

No esperaría 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.

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

función súper simple que le permitirá crear su propia estructura de tabuladores / acordeones 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'');

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

solo agrega el estilo css beloww

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