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

Mensaje  Chalo
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:
staff
Chalo
avatar

¿Que estoy pensando? :

los dias de ocio son geniales [table class=fecha_up][td]Se modifico:13/12/17 - 11:40 hrs. [/td][/table]


Banner en temas :

http://i.imgur.com/XlCMsAOh.jpeg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6465


Puntos :

8477


Me gusta :

967


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario http://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 :

http://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

Mensaje  rokitx
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 :

62


Puntos :

66


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 :

112


Puntos :

127


Me gusta :

11


ingreso :

21/01/2016


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Mensaje  kensha
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 :

279


Puntos :

405


Me gusta :

74


ingreso :

12/05/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


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

Volver arriba Ir abajo

Mensaje  Emma21
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

Mensaje  Emma21
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 :

http://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

Mensaje  rylan
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.