Staff en línea
Últimos temas
[recursos] IMAGE RANK
por anonmap Hoy a las 12:15 pm

[recursos] Pack 40 smiles
por anonmap Hoy a las 12:14 pm

[recursos] Free Forum Ranks
por anonmap Hoy a las 12:11 pm

[recursos] Pack Rangos
por anonmap Hoy a las 12:09 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
Chalo

¿Que estoy pensando? :

De regreso [table class=fecha_up][td]Se modifico:27/02/19 - 8:46 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6887


Puntos :

8988


Me gusta :

1034


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

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

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


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
Chalo

¿Que estoy pensando? :

De regreso [table class=fecha_up][td]Se modifico:27/02/19 - 8:46 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6887


Puntos :

8988


Me gusta :

1034


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

Gracias!
Voy a probarlo en lugar del que tengo.
katiliz94
katiliz94

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

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

¿Que estoy pensando? :

De regreso [table class=fecha_up][td]Se modifico:27/02/19 - 8:46 hrs. [/td][/table]


Banner en temas :

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


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6887


Puntos :

8988


Me gusta :

1034


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


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

Volver arriba Ir abajo

gracias, otra vez

a ver si cambio el que tengo yo
kensha
kensha

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

287


Puntos :

421


Me gusta :

82


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
XyriuSbLaZ

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

106


Me gusta :

18


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

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 :

101


Me gusta :

14


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.