Staff en línea

Página 2 de 3. Precedente  1, 2, 3  Siguiente

[Javascript] Colocar las categorias como pestañas
Tema iniciado por y Añadir a favoritos

staff
Recuerdo del primer mensaje :

[codebox]Creador: Desconocido

Demo:
Capturas:


Descripción: Coloca las categorias del indice como pestañas con efecto[/codebox]

Código:

Javascript

[hidecode]
Código:
$(function() {
  $("div.table-title").closest("div.forabg").addClass("cat-table").first().before('<div id="cat-tabs"></div>');
  $(".cat-table:not(:first)").hide();
  $("div.table-title h2").each(function() {
    $("#cat-tabs").append('<div class="ct-item">' + $(this).text() + "</div>")
  });
  $("#cat-tabs .ct-item").click(function() {
    $("#cat-tabs .ct-abled").removeClass("ct-abled");
    $(this).addClass("ct-abled");
    $(".cat-table").not($(".cat-table").eq($("#cat-tabs .ct-item").index(this)).slideDown(200)).slideUp(200)
  }).first().addClass("ct-abled")
});
[/hidecode]





CSS
Código:
#cat-tabs { text-align: center; margin: 10px auto; }
#cat-tabs .ct-item { display: inline; background: blue; color: #fff; margin: 5px; padding: 5px;  }
#cat-tabs .ct-abled { color: blue; background: #fff; }






:Oculto:
Chalo
avatar

¿Que estoy pensando? :

vamos a hacer cosas geniales :) [table class=fecha_up][td]Se modifico:24/05/18 - 11:11 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6712


Puntos :

8775


Me gusta :

1006


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Veo, aunque en el foro las chicas siempre me dicen que se pierden
LuluAlle
avatar

¿Que estoy pensando? :

Are you a pusher or are you a puller? [table class=fecha_up][td]Se modifico:21/8/15 - 11:57 hrs.[/td][/table]


Banner en temas :

http://fbcoversking.com/wp-content/uploads/2012/01/waves-of-colour-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

28


Puntos :

37


Me gusta :

9


ingreso :

13/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Quisiera probarlo a ver que tal
angiemg
avatar

¿Que estoy pensando? :

Con mucho frio [table class=fecha_up][td]Se modifico:21/01/16 - 11:58 hrs.[/td][/table]


Banner en temas :

https://i.imgur.com/p6GfH0S.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

70


Puntos :

98


Me gusta :

12


ingreso :

26/08/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Muchas gracias por el aporte C:
Michelle M
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://www.likecovers.com/covers/girl-catching-balloon-heart.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

25


Puntos :

39


Me gusta :

12


ingreso :

10/03/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

boy a probar gracias aver.
rokitx
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://www.profilebrand.com/images/facebook-cover/4342-loading-90-percent-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

72


Puntos :

76


Me gusta :

4


ingreso :

18/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

gracias por el tuto
Andreii
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://static.tumblr.com/376a46baffe3444282f3b414a2fd0d46/jsyqb9t/qxbnm1bqy/tumblr_static_tumblr_static_4eo5pzujbwcg8gws0gcc8oc0s_focused_v3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

142


Puntos :

165


Me gusta :

19


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

quiero revisar el código, creo que dañe el mio :P
kensha
avatar

¿Que estoy pensando? :

regresando [table class=fecha_up][td]Se modifico:27/03/17 - 9:42 hrs.[/td][/table]


Banner en temas :

http://facecoverz.com/static/img/uploads/o_facecoverz.com-1365693265366.jpg


Color de titulos :

#0FAEAC


Sombra titulo :

1px 1px 1px #fff


Mensajes :

284


Puntos :

413


Me gusta :

77


ingreso :

12/05/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://bookland.activosforos.com

Volver arriba Ir abajo

Estoy haciendo un foro y la verdad es que , quiero que mis categorias como pestañas , no tengo un amplio dominio de estos lenguajes pero me se defender en uno mas que otros .
Aqui no puedo ver el Javascrip , solo veo el CSS.
Emma21

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://doublemesh.com/wp-content/uploads/2015/12/star-wars-7-cover-photo.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

11


Puntos :

11


Me gusta :

0


ingreso :

24/01/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Ya puedo ver el Java.
Gracias , ahora a probar y ver que tal .
Emma21

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://doublemesh.com/wp-content/uploads/2015/12/star-wars-7-cover-photo.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

11


Puntos :

11


Me gusta :

0


ingreso :

24/01/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Aún no puedo ver el JavaScript, y la verdad confieso que soy inexperta en el uso de este foro, así que pido disculpas de antemano si cometo algún error...

Me pregunto si con este código se pueden seleccionar qué categorías poner en pestañas y cuáles no.
Cristianita
avatar

¿Que estoy pensando? :

Todo lo puedo en Cristo, que me fortalece (Filipenses 4:13) [table class=fecha_up][td]Se modifico:11/02/17 - 15:21 hrs.[/td][/table]


Banner en temas :

https://i.imgur.com/ATCmmOmh.jpeg


Color de titulos :

#ffffff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

47


Puntos :

69


Me gusta :

12


ingreso :

01/02/2016


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Firefox


Ver perfil de usuario http://plantandoeternidad.com

Volver arriba Ir abajo

Estuve buscando un código para tener las categorías en pestañas y la verdad es que no quedo como esperaba, ojala este me sirva!!
rylan
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://cmster.com/media/zK6gsTwm582H5GsPbn7JUYajMdwJjGwkGOBGVuiixEJODohU4b2ooCwasVTPfmCx.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

7


Puntos :

8


Me gusta :

1


ingreso :

22/02/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.