On the website http://gazgolder.com, when you click on the top menu, the page changes without rebooting (this is not difficult), but how to make the url address change, and when you go directly to it, it’s not the main page that is listed in the url ??? Tell me who knows ...



    5 answers 5

    Use this jquery address , in the examples there is a solution to your problem!

      Usually on AJAX sites with "transitions" change the hash - part of the address bar after the "grid" # . For example, it was www.site.ru/ , it became www.site.ru/#stranica-pro-traktor , then they switched to another, it became www.site.ru/#kontakty

      When the page is loaded for the first time, JS needs to select a hash, if it exists, and immediately load the necessary part. This can only be done by JS, at the HTTP request, the part after the hash is not transmitted.

      I did this, for example, on my website , although it is without PHP, and the loaded HTML immediately contains data for all sections. The link immediately leads to the section on printing, and changes during the transition between sections.

        In new browsers there is such a feature as

         window.history.pushState("object or string", "Title",byurl); window.history.replaceState("object or string", "Title",byurl);

        Provides the ability to replace the URL without reloading the page.

          as an option to use hash navigation. As already mentioned in one of the comments, the url part is used after the "#" sign, navigation links contain, respectively, links of the form

           <a href="#contacts">Обратная связь</a>

          As you know, links that begin with "#" are defined as links that lead to the current page, and, accordingly, when clicking on them, the transition to another page does not occur. Next, the whole feature is in using javascript of the 'hashchange' event, which is triggered by changing the part of the url after the "#" and the window.location.hash property, which stores the necessary part of the url. The event handler of this event is loaded with ajax of the page content to which the transition is made.

          Etc:

           $(window).bind('hashchange', function() { var pageName = window.location.hash; $.get( "content.php", { page: pageName }, function(data) { $('#content').html(data); } ); });
          • It is worth considering that by default, the site using this type of navigation will have problems with visibility in search engines. To resolve this issue from google in the article developers.google.com/webmasters/ajax-crawling/docs/… - zippp
          • Well, you don’t just need to have hash, you need to use the History API and you don’t need to read any crap invented by Google. - devote

          There is a jQuery plugin jQuery-URL-Parser. Put this purl.js file on your site (from the distribution kit). And then to get the GET parameter out of the URL and write, for example, such a variable, or how convenient

           var urlPage = $.url().param("page");

          .param("page") parameter here is the page . That is, the link should look like this:

           mysite.ru/?page=1

          So you can write a condition

           If(urlPage == 1) { //действие, например .load }