單頁網站，打開更改哈希部分AJAX

這可能是一個愚蠢的問題，但假設我有一個頁面網站，其中所有部分都是隱藏的，只有在點擊按鈕菜單以顯示特定部分並隱藏時纔會顯示其他的。現在，當我重新加載頁面時，它總是打開默認的第一頁。我想用的東西，單頁網站，打開更改哈希部分AJAX

www.example/index.html的＃第1頁

或

www.example/index.html的＃第2頁

或

www.example.com/index.html＃page3

index.html頁面：

菜單：

<ul> 
<li>page1</li> 
<li>page2</li> 
<li>page3</li> 
</ul

部分：

<div id="page1">content</div> 
<div id="page2" style="display:none">content</div> 
<div id="page3" style="display:none">content</div>

謝謝您的幫助。

來源

2013-08-23 medzi

結帳Backbone.js。它只是你正在尋找的.. –

對於搜索引擎優化標準，這是完全不切實際的，但是如果你決定去任何地方，你可以使用jQuery。

HTML

<ul id="myMenu"> 
    <li><a href="#page1">page1</a></li> 
    <li><a href="#page2">page2</a></li> 
    <li><a href="#page3">page3</a></li> 
</ul> 

<div id="page1" class="pages">content 1</div> 
<div id="page2" class="pages" style="display:none">content 2</div> 
<div id="page3" class="pages" style="display:none">content 3</div>

的jQuery（JavaScript）的

$(function() {  
    $(window).on("hashchange", function() { 
     var hash = window.location.hash; 
     if (hash != "") { 
      $(".pages").hide(); 
      $(hash).show(); 
     } 
    }); 
});

來源

2013-08-23 10:27:08 melancia

是的，我知道，不適合搜索引擎優化。但這不一定是。無論如何，你的解決方案是我已經有的，但是如果url只是index.html，我怎麼打開讓我們說page2？我不能使用像index.html＃page2 – medzi

我已經更新了我的答案。這是在jsFiddle上測試它的技巧，所以請放手。 – melancia

就是這樣。非常感謝！ – medzi

<html> 
    <head> 
    </head> 
    <body> 
    <ul> 
     <li><a href="#page1">page1</a></li> 
     <li><a href="#page2">page2</a></li> 
     <li><a href="#page3">page3</a></li> 
    </ul> 
    <div id="page1">page1</div> 
    <div id="page2">page2</div> 
    <div id="page3">page3</div> 
    <script> 
     var pageIds = ['page1','page2','page3']; 
     function hidePage(){ 
     for(var i=0;i<pageIds.length;i++){ 
      document.getElementById(pageIds[i]).style.display = 'none'; 
     } 
     } 
     function getPage(){ 
     var hash = window.location.hash.slice(1); 
     return document.getElementById(hash); 
     } 
     function showPage(){ 
     var currentPage = getPage(); 
     if(currentPage){ 
      currentPage.style.cssText = 'display:block'; 
      }else{ 
      document.getElementById('page1').style.cssText = 'display:block'; 
     } 
     } 
     function initPage(){ 
     hidePage(); 
     showPage(); 
     } 
     initPage(); 
     setInterval(function(){ 
     initPage(); 
     },300); 
    </script> 
    </body> 
</html>

來源

2013-08-23 10:35:58 xiaojue

jQuery有緩存庫，您可以使用該庫去年保持打開的選項卡或鏈接。

來源

2013-08-23 10:38:47

單頁網站，打開更改哈希部分AJAX

回答

相關問題