Soy nuevo y acabo de hacer una de mis primeras funciones feas para mostrar y ocultar. Pero me gustaría que alguien que realmente sepa sobre el tema lo revise y me muestre una mejor manera de hacerlo.

Básicamente estoy haciendo una pequeña web de una sola página que tiene cuatro botones, y desde allí puedes ir a todas las secciones, su contenido es realmente pequeño, así que elijo cambiar entre los divs que están ocultos. Estoy leyendo sobre jquery y lo he estado usando últimamente solo un poquito. Hice una función que funciona como quiero, pero estoy seguro de que se puede mejorar y, como resultado, aprenderé más.

¡¡Gracias!!

CSS:

 #page1, #page2{ display: none; }

jquery:

 $(document).ready(function(){ $("button.page1").click(function(){ $("#main").hide(); $("#page1").show(); }); $("button.page2").click(function(){ $("#main").hide(); $("#page2").show(); }); $("button.page3").click(function(){ alert("Time flies, coming soon!!"); }); $("button.page4").click(function(){ alert("I'm working on it, coming soon!!"); }); $("button.gobackfrompage1").click(function(){ $("#main").show(); $("#page1").hide(); }); $("button.gobackfrompage2).click(function(){ $("#main").show(); $("#page2").hide(); }); });