Изменить URL-адрес и обновить содержимое страницы без перезагрузки

Question

Это касается моего проекта в прошлом году по веб-разработке. Я хочу изменить содержимое своей страницы без перезагрузки страницы. Я знаю, что это может быть достигнуто с помощью css/ajax или jquery, но это будет только скрыть и показать или заменитьWith() в jquery. Я хочу изменить URL-адрес. я хочу достичь чего-то вроде этой страницы https://www.khanacademy.org/computing/computer-programming - когда пользователь нажимает на INTRO TO JS: рисование и анимация вы увидите URL-адрес и содержимое изменений страницы, но страница не перезагружается.

руководство будет оценено по достоинству. спасибо

небольшой проект:

**MY header.php** 

<script language="javascript" src="jquery-1.4.4.min.js"></script> 
 
<script> 
 
$(function(){ 
 
\t $("a[rel='tab']").click(function(e){ 
 
\t \t //e.preventDefault(); 
 
\t \t /* \t 
 
\t \t if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content; 
 
\t \t if commented, html5 nonsupported browers will reload the page to the specified link. 
 
\t \t */ 
 
\t \t 
 
\t \t //get the link location that was clicked 
 
\t \t pageurl = $(this).attr('href'); 
 
\t \t 
 
\t \t //to get the ajax content and display in div with id 'content' 
 
\t \t $.ajax({url:pageurl+'?rel=tab',success: function(data){ 
 
\t \t \t $('#content').html(data); 
 
\t \t }}); 
 
\t \t 
 
\t \t //to change the browser URL to 'pageurl' 
 
\t \t if(pageurl!=window.location){ 
 
\t \t \t window.history.pushState({path:pageurl},'',pageurl); \t 
 
\t \t } 
 
\t \t return false; 
 
\t }); 
 
}); 
 
/* the below code is to override back button to get the ajax content without reload*/ 
 
$(window).bind('popstate', function() { 
 
\t $.ajax({url:location.pathname+'?rel=tab',success: function(data){ 
 
\t \t $('#content').html(data); 
 
\t }}); 
 
}); 
 
</script> 
 
<div id='menu'> 
 
\t <a rel='tab' href='http://localhost/html5-history-api/menu1.php'>menu1</a> | 
 
\t <a rel='tab' href='http://localhost/html5-history-api/menu2.php'>menu2</a> | 
 
\t <a rel='tab' href='http://localhost/html5-history-api/menu3.php'>menu3</a></div>

мой menu1.php (menu2 и 3 имеют тот же код)

<?php 
 
if($_GET['rel']!='tab'){ 
 
\t include 'header.php'; 
 
\t echo "<div id='content'>"; 
 
} 
 
?> 
 
menu1 content in menu1.php 
 
<?php 
 
if($_GET['rel']!='tab'){ 
 
\t echo "</div>"; 
 
\t include 'footer.php'; 
 
}?>

я хочу, когда я нажимаю на ссылку - ссылка исчезает, и он отображает только содержание, как дэ «menu1 содержание в menu1.php» только и ничего на странице

Answer 1

Если вы используете браузер Chrome , просто клик на этом div и используйте опцию «проверить элемент». Это удобные инструменты для веб-разработчиков. Указанная ссылка - это просто гиперссылка, так как она очень простая статическая страница в том же домене, используя те же ресурсы (css, js), что очень быстро загружается, и создается впечатление, что загрузка страницы отсутствует.

Answer 2

Я считаю, что этот скрипт, который я копирую с прикрепленного сайта, объясняет, как они заменяют URL. Чтобы отслеживать местоположение, они используют localStorage для отслеживания местоположения страницы и других вещей. Перейдите на страницу и перейдите к ссылке, на которую вы ссылались. Затем откройте консоль и введите localStorage. Когда вы нажмете Банану, вы увидите, что я говорю.

Вы можете сделать это

localStorage.setItem("itemName", item) 
localStorage.getItem("itemName") 

Ниже представлен найденный код

<script type="text/javascript"> 
(function() { 
     // If we arrived via a Facebook callback, it might have appended #_=_ 
     // to our URL. This can confuse our Backbone routers, so get rid of it. 
     // http://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url 
     if (window.location.hash === "#_=_"){ 
      if (history.replaceState) { 
       history.replaceState(null, null, 
         window.location.href.split("#")[0]); 
      } else { 
       window.location.hash = ""; 
      } 
     } 
    })(); 
</script>