頁面轉換不使用jQuery重新加載

所以我搜索了一段時間，我想我已經找到了我的答案，但我不確定如何應用它。頁面轉換不使用jQuery重新加載

我的問題是這樣的：我有一個網站有一個菜單（該網站編碼在PHP和HTML5），並且每個菜單項鍊接到另一個頁面。頁面的工作方式是：

http://domainhere/index.php#home 
http://domainhere/index.php#about 
http://domainhere/index.php#contact

諸如此類......

截至目前，因爲如果用戶想要的網頁不理想直接鏈接到有關網頁，在index.php＃家頁面將加載。我想要的是一個函數，當文檔加載地址時，它可以讀取hashtag後面的值，並在我編寫的#content div容器中加載適當的內容。截至目前，我有使用動畫和show（）/ hide（）來隱藏每個頁面的div的jQuery函數。另外，我的主頁的格式與其餘頁面不同，它需要動畫來減少標題大小。我已經閱讀了這篇文章，並且提出了很多AJAX解決方案，但我不確定該如何應用這一點。任何一個首發都會很棒，我會繼續磨合！

感謝

來源

2012-05-31 user1302223

通過現代Web應用程序中的URL處理狀態的好摘要：https：//github.com/balupton/history.js/wiki/Intelligent-State-Handling – jasssonpet

如果我得到你的問題的權利，你可以做這樣的事情，

$(document).ready(function(){ 
    var target = location.hash; 

    // Code to hide all section 

    // Show the section/div whose is placed on url 
    $(target).show('fast'); 

});

來源

2012-05-31 16:30:54 Jashwant

我閱讀的主題標籤和應對其計算方法如下，使用jQuery的解決方案。

的jQuery插件使用：jquery.ba-hashchange.min.js，在發現：http://benalman.com/projects/jquery-hashchange-plugin/

我設置散列函數的變化發生在頁面加載，並在哈希變化。因此，您不必從菜單中調用show/hide函數，而只需將它們放入哈希修改函數中，讓它處理頁面加載和菜單選擇。你的菜單鏈接，只需要關心改變散列。

而且，如果您最終切換到使用AJAX單獨加載您的頁面內容，而不是整個網站一舉成名，那麼交換機中的函數調用可以使ajax調用返回特定的內容。或者，您可以將hashtag傳遞給通用的ajax調用，並且ajax web方法/服務調用可以根據傳遞的hashtag來確定要返回哪些內容。

$(function() { 
    $(window).hashchange(function() { 
     var hash = location.hash; 

     //This part here untested - you'll need to write it custom for your menu. 
     switch (hash){ 
      case "#about": 
       ShowAboutDiv(); 
       //this should be the function you already call to show the about div. 
       break; 
      case "#contact": 
       ShowContactDiv(); 
       break; 
      default : 
       //show home div, or maybe it already shows. 
       break; 
     }; 
    }); 


    //handle page load hash... 
    $(window).hashchange(); 
});

來源

2012-05-31 16:39:07

頁面轉換不使用jQuery重新加載

回答

相關問題