它涉及我在網站開發方面的最後一年項目。我想改變我的網頁的內容,而不重新加載頁面 - 我知道這可以實現使用css/ajax或jQuery,但這隻會通過隱藏和顯示或replaceWith()在jQuery中。 我希望網址也可以改變。我想實現類似這樣的頁面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';
}?>
我想,當我點擊鏈接 - 鏈接消失,它如果您使用的是Chrome瀏覽器顯示只有像只「在menu1.php MENU1內容」,並沒有其他的頁面
? –
檢查這個http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page –
看看Angular JS,更具體地說,這個概念叫做「單頁應用程序(SPA)」。 Gmail,臉譜等等現在都在使用相同的體系結構 – AdityaParab