$(".icon-bg").click(function () { $(".btn").toggleClass("active"); $(".icon-bg").toggleClass("active"); $(".container").toggleClass("active"); $(".box-upload").toggleClass("active"); $(".box-caption").toggleClass("active"); $(".box-tags").toggleClass("active"); $(".private").toggleClass("active"); $(".set-time-limit").toggleClass("active"); $(".button").toggleClass("active"); }); $(".button").click(function () { $(".button-overlay").toggleClass("active"); }); $(".iconmelon").click(function () { $(".box-upload-ing").toggleClass("active"); $(".iconmelon-loaded").toggleClass("active"); }); $(".private").click(function () { $(".private-overlay").addClass("active"); $(".private-overlay-wave").addClass("active"); });¿Alguien puede ayudar? Es para una función de carga que encontré en http://codepen.io/iremlopsum/pen/YPWPap . Tratando de ponerlo en mi sitio web
1) La mejor práctica es crear un nuevo archivo javascript como my.js. Haga este archivo en su carpeta js en el directorio raíz -> js/my.js. 2) En el archivo my.js, agregue su código dentro del alcance de $(document).ready(function(){}).
$(document).ready(function(){ $(".icon-bg").click(function () { $(".btn").toggleClass("active"); $(".icon-bg").toggleClass("active"); $(".container").toggleClass("active"); $(".box-upload").toggleClass("active"); $(".box-caption").toggleClass("active"); $(".box-tags").toggleClass("active"); $(".private").toggleClass("active"); $(".set-time-limit").toggleClass("active"); $(".button").toggleClass("active"); }); $(".button").click(function () { $(".button-overlay").toggleClass("active"); }); $(".iconmelon").click(function () { $(".box-upload-ing").toggleClass("active"); $(".iconmelon-loaded").toggleClass("active"); }); $(".private").click(function () { $(".private-overlay").addClass("active"); $(".private-overlay-wave").addClass("active"); }); });3) agregue su nuevo archivo js en su html
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="/js/my.js"></script> </head>Antes de la etiqueta del body de cierre, agregue esto (referencia a la biblioteca jQuery). Otras bibliotecas alojadas se pueden encontrar aquí
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>Y esto
<script> //paste your code here </script>Debería verse algo como esto
<body> ........ ........ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> Your code </script> </body>Recomendaría llamar al script así
... <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="/js/my.js"></script> </body>Los archivos js y css deben tratarse de manera diferente
Ponga
jquerycomo el primero antes de otrosJS scriptsen la parte inferior de la etiqueta<BODY>
HTTP/1.1 specification sugiere que los navegadores no descarguen más de dos componentes en paralelo por nombre de host.<head> y deje que el resto, incluido jquery , se llame en la etiqueta inferior <body> .Coloque
CSS styleencima de la etiqueta<HEAD>después de las otras etiquetas más prioritarias
HEAD del documento hace que parezca que las páginas se cargan más rápido. Esto se debe a que poner hojas de estilo en HEAD permite que la página se represente progresivamente.css , es mejor ponerlas todas en la etiqueta <head> pero dejar que el estilo que se representará inmediatamente se coloque en las etiquetas <style> dentro de <HEAD> y el resto en <body> .También puede encontrar otras sugerencias cuando pruebe su página como en Google PageSpeed Insight