jQuery tabs con animación, sombras y esquinas redondeadas

jQuery tabs con animación, sombras y esquinas redondeadas

jQuery tabs con animación, sombras y esquinas redondeadas

En la próxima actualización de mi plugin para WordPress Youtube Channel Gallery voy a organizar las diferentes partes del plugin mediante pestañas. Aunque en un principio pensé en usar las Tabs de jQuery UI vi que si otro plugin usaba ese mismo widget machacaría los estilos de mi plugin y que además no necesitaba algo tan complejo. Hay muchos ejemplos de cómo crear un sistemas de pestañas usando sólo jQuery y de forma sencilla pero quería algo que tuviera más detalle, como animación entre pestañas, sombras y esquinas redondeadas.

El JavaScript quedaría de la siguiente forma:

El CSS quedaría de la siguiente forma:

Y finalmente, el HTML tendría el siguiente aspecto:

Tags:
©2021 PoseLab SL. All rights reserved.