{"id":2107,"date":"2012-03-02T14:28:44","date_gmt":"2012-03-02T14:28:44","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2107"},"modified":"2012-08-28T19:28:35","modified_gmt":"2012-08-28T19:28:35","slug":"menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/","title":{"rendered":"Men\u00fa jQuery para no recargar la p\u00e1gina"},"content":{"rendered":"

\"\"<\/a>En este art\u00edculo vamos explicar detalladamente como obtener un men\u00fa horizontal con varios links que al pulsarlos se cargue el contenido en un div sin recargar totalmente la p\u00e1gina.<\/p>\n

Lo primero que deberemos hacer para obtener lo que se menciona es incluir en el <head> de vuestra p\u00e1gina los scripts necesarios jQuery y una funci\u00f3n por cada link para hacer una llamada al archivo php que toque.<\/p>\n

<script language=\"javascript\" src=\"js\/jquery-1.2.6.min.js\"><\/script>\r\n<script language=\"javascript\">\r\nfunction mostrarContenido(){\r\n\u00a0\u00a0 \u00a0var variable_post=\"Mi texto recargado\";\r\n\u00a0\u00a0 \u00a0$.post(\"includes\/contenido.php\", { variable: variable_post }, function(data){\r\n\u00a0\u00a0 \u00a0$(\"#recargado\").html(data);\r\n\u00a0\u00a0 \u00a0});\r\n}\r\n\r\nfunction mostrarContenido1(id){\r\n\u00a0\u00a0 \u00a0var variable_post=id;\r\n\u00a0\u00a0 \u00a0$.post(\"includes\/contenido1.php\", { variable: variable_post }, function(data){\r\n\u00a0\u00a0 \u00a0$(\"#recargado\").html(data);\r\n\u00a0\u00a0 \u00a0});\r\n}\r\n\r\nfunction mostrarContenido2(id){\r\n\u00a0\u00a0 \u00a0var variable_post=id;\r\n\u00a0\u00a0 \u00a0$.post(\"includes\/contenido2.php\", { variable: variable_post }, function(data){\r\n\u00a0\u00a0 \u00a0$(\"#recargado\").html(data);\r\n\u00a0\u00a0 \u00a0});\r\n}\r\n\r\nfunction mostrarContenido3(id){\r\n\u00a0\u00a0 \u00a0var variable_post=id;\r\n\u00a0\u00a0 \u00a0$.post(\"includes\/contenido3.php\", { variable: variable_post }, function(data){\r\n\u00a0\u00a0 \u00a0$(\"#recargado\").html(data);\r\n\u00a0\u00a0 \u00a0});\r\n}\r\n<\/script><\/pre>\n
Como vemos, las funciones que estamos a\u00f1adiendo le estamos pasando una id que podr\u00eda ser \u00fatil en aquellos casos que querramos mostrar registros de seg\u00fan que elemento. Seguidamente, abrimos mediante el m\u00e9todo POST un ficher php donde estar\u00e1 el contenido a mostrar en la parte din\u00e1mica que ser\u00e1 el <div> con id=\u00bbrecargado\u00bb.<\/p>\n
Despu\u00e9s, en nuestro <body> deberemos mostrar los links que recargar\u00e1n los contenidos. Utilizamos el evento onclick para llamar a la funci\u00f3n que corresponda para recargar en el <div> correspondiente el archivo php que toque.<\/p>\n
<ul>\r\n\u00a0\u00a0\u00a0 <li><a href=\"#\" onclick=\"javascript:mostrarContenido();\">Contenido<\/a><\/li>\r\n\u00a0\u00a0\u00a0 <li><a href=\"#\" onclick=\"javascript:mostrarContenido1(105);\">Contenido 1<\/a><\/li>\r\n\u00a0\u00a0\u00a0 <li><a href=\"#\" onclick=\"javascript:mostrarContenido2(105);\">Contenido 2<\/a><\/li>\r\n\u00a0\u00a0\u00a0 <li><a href=\"#\" onclick=\"javascript:mostrarContenido3(105);\">Contenido 3<\/a><\/li>\r\n<\/ul><\/pre>\n
El tema estilos lo dejo en vuestras manos.<\/p>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En este art\u00edculo vamos explicar detalladamente como obtener un men\u00fa horizontal con varios links que al pulsarlos se cargue el contenido en un div sin recargar totalmente la p\u00e1gina. Lo primero que deberemos hacer para obtener lo que se menciona es incluir en el <head> de vuestra p\u00e1gina los scripts necesarios jQuery y una funci\u00f3n […]<\/p>\n","protected":false},"author":1,"featured_media":4297,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,5,3],"tags":[44],"class_list":["post-2107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-jquery","category-php","tag-menus"],"yoast_head":"\nMen\u00fa jQuery para no recargar la p\u00e1gina - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Men\u00fa jQuery para no recargar la p\u00e1gina - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos explicar detalladamente como obtener un men\u00fa horizontal con varios links que al pulsarlos se cargue el contenido en un div sin recargar totalmente la p\u00e1gina. Lo primero que deberemos hacer para obtener lo que se menciona es incluir en el <head> de vuestra p\u00e1gina los scripts necesarios jQuery y una funci\u00f3n […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-02T14:28:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-08-28T19:28:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/jquery13.png\" \/>\n\t<meta property=\"og:image:width\" content=\"256\" \/>\n\t<meta property=\"og:image:height\" content=\"256\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/\",\"name\":\"Men\u00fa jQuery para no recargar la p\u00e1gina - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/jquery13.png\",\"datePublished\":\"2012-03-02T14:28:44+00:00\",\"dateModified\":\"2012-08-28T19:28:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/jquery13.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/jquery13.png\",\"width\":256,\"height\":256},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Men\u00fa jQuery para no recargar la p\u00e1gina\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Men\u00fa jQuery para no recargar la p\u00e1gina - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Men\u00fa jQuery para no recargar la p\u00e1gina - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos explicar detalladamente como obtener un men\u00fa horizontal con varios links que al pulsarlos se cargue el contenido en un div sin recargar totalmente la p\u00e1gina. Lo primero que deberemos hacer para obtener lo que se menciona es incluir en el <head> de vuestra p\u00e1gina los scripts necesarios jQuery y una funci\u00f3n […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-03-02T14:28:44+00:00","article_modified_time":"2012-08-28T19:28:35+00:00","og_image":[{"width":256,"height":256,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/jquery13.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/","url":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/","name":"Men\u00fa jQuery para no recargar la p\u00e1gina - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/jquery13.png","datePublished":"2012-03-02T14:28:44+00:00","dateModified":"2012-08-28T19:28:35+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/jquery13.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/03\/jquery13.png","width":256,"height":256},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/menu-horizontal-utilizando-jquery-para-no-recargar-la-pagina\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Men\u00fa jQuery para no recargar la p\u00e1gina"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2107"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2107\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4297"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}