Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por YoshiGM Hoy a las 11:46 am

[recursos] Pack Rangos
por elvinson Vie Ene 19, 2018 6:05 pm

[aviso] Bugs: cambios en el foro
por YoshiGM Jue Ene 18, 2018 8:00 pm

[Pedido] Rangos para el Staff
por YoshiGM Jue Ene 18, 2018 2:11 pm

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

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

staff
[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? :

Bienvenidosss!!! [table class=fecha_up][td]Se modifico:11/01/18 - 12:23 hrs. [/td][/table]


Banner en temas :

https://orig00.deviantart.net/2c56/f/2016/271/3/4/overwatch___mccree___facebookcover_by_beanousme-da03g04.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6522


Puntos :

8555


Me gusta :

986


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Hola… tengo una pregunta espero y me puedan ayudar.

En mi foro tenemos las categorías en pestañas, pero me gustaría cambiar los que señalo en la imagen. ¿Hay alguna manera de que se vea de otra manera...? ¿Otro diseño?

Espero y me puedan ayudar, Gracias!!!

Código:
http://i.imgur.com/fTo80YW.png


DanielTFM
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://fbcoversking.com/wp-content/uploads/2012/01/waves-of-colour-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

9


Puntos :

12


Me gusta :

3


ingreso :

11/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff


Última edición por Pauu~ el Jue Mayo 28, 2015 8:11 am, editado 2 veces
El código que usas para las pestañas solo te permite darle bordes y padding, así que sería ya imaginación de cada uno ponerlo de X o Y forma. Y no hay demasiado margen para hacerle algo. También podrías probar con background-imagen a ver que te sale.
RinC
avatar

¿Que estoy pensando? :

Ya echaba de menos mi open!


Banner en temas :

http://i.imgur.com/WpuuVJy.jpg


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

788


Puntos :

1135


Me gusta :

189


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
@DanielTFM escribió:[quotelink="/t334-javascript-colocar-las-categorias-como-pestanas#1752"]
Hola… tengo una pregunta espero y me puedan ayudar.

En mi foro tenemos las categorías en pestañas, pero me gustaría cambiar los que señalo en la imagen. ¿Hay alguna manera de que se vea de otra manera...? ¿Otro diseño?

Espero y me puedan ayudar, Gracias!!!

Código:
http://i.imgur.com/fTo80YW.png



hola @DanielTFM, con gusto te ayudo, puedes hacer un tema de esto en soporte ;)
Chalo
avatar

¿Que estoy pensando? :

Bienvenidosss!!! [table class=fecha_up][td]Se modifico:11/01/18 - 12:23 hrs. [/td][/table]


Banner en temas :

https://orig00.deviantart.net/2c56/f/2016/271/3/4/overwatch___mccree___facebookcover_by_beanousme-da03g04.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6522


Puntos :

8555


Me gusta :

986


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Gracias!
Voy a probarlo en lugar del que tengo.
katiliz94
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://fbcoversking.com/wp-content/uploads/2012/01/waves-of-colour-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

7


Puntos :

10


Me gusta :

3


ingreso :

06/05/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

gracias
Fusilet
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://fbcoversking.com/wp-content/uploads/2012/01/waves-of-colour-facebook-cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

43


Puntos :

58


Me gusta :

5


ingreso :

05/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
veo
Chalo
avatar

¿Que estoy pensando? :

Bienvenidosss!!! [table class=fecha_up][td]Se modifico:11/01/18 - 12:23 hrs. [/td][/table]


Banner en temas :

https://orig00.deviantart.net/2c56/f/2016/271/3/4/overwatch___mccree___facebookcover_by_beanousme-da03g04.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6522


Puntos :

8555


Me gusta :

986


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

gracias, otra vez

a ver si cambio el que tengo yo
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

Veamos este, no entiendo bien la función pero lo pruebo a ver si me gusta.
XyriuSbLaZ
avatar

¿Que estoy pensando? :

En nada [table class=fecha_up][td]Se modifico:22/7/15 - 22:44 hrs.[/td][/table]


Banner en temas :

http://tweeting.com/wp-content/uploads/2012/04/Cute-Kitten-Facebook-Cover.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

84


Puntos :

104


Me gusta :

16


ingreso :

10/07/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://megauniverso.superforo.net/

Volver arriba Ir abajo

A probarlo a ver que tal!
Beautygirl

¿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 :

https://s-media-cache-ak0.pinimg.com/736x/25/9e/86/259e867eb8d4ca92c733d6246e846083.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

77


Puntos :

100


Me gusta :

13


ingreso :

12/05/2015


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.