在更新地址字段時導航到無內容重新加載的新內容

我正在使用Javascript來顯示文檔。首先，我隱藏加載的內容。然後，如果用戶按下按鈕，與該按鈕相關的文本將隱藏其他文本時變爲可見。在更新地址字段時導航到無內容重新加載的新內容

目前，我的技術不會更改顯示在地址欄中的網址。

我想在用戶點擊其中一個內容顯示按鈕時更新地址欄。例如：

address.com/value_of_button

而且，如果用戶輸入：

adress.com/a_value

我想改變與該值相關的div顯示。這是如何完成的？

來源

2012-02-04 user1189296

的（http://stackoverflow.com/問題/ 3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for）技術是一次只有幾個追隨者的技術。 – 2012-02-04 12:11:34

關於[Hash URIs]（http://www.jenitennison.com/blog/node/154）和一些關於[jQuery UI如何處理這個]的信息（http://stackoverflow.com/questions/570276/改變定位散列與 - jquery的-UI-標籤）。 – 2012-02-04 12:13:49

使用Javascript隱藏內容時要小心;它可能導致內容「出現然後消失」，這不是非常用戶友好的。考慮使用使元素不可見的CSS樣式。 – 2012-02-04 13:30:46

我已經在去年的某個時候用jQuery演示了這一點。當然可以不使用jQuery，但我會爲您提供我創建的演示。我將把例子移植到常規的Javascript中。

<html> 
<head> 
<style type="text/css"> 
.content { 
    display: none; 
} 
</style> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> 
<script type="text/javascript"> 

$(document).ready(function(){ 
    $('#menu a').each(function(){ 
     id = $(this).attr('href'); 
     id = id.substring(id.lastIndexOf('/')); 
     id = id.substring(0,id.indexOf('.')); 
     $(this).attr('rel',id); 
    }); 
    $('#home').show(); 
    $('#menu a').click(function(e){ 
     e.preventDefault(); 
     $('.content').hide(); 
     $('#'+$(this).attr('rel')).show(); 
     location.hash = '#!/'+$(this).attr('rel'); 
     return false; 
    }); 
}); 

</script> 
</head> 
<body> 
<div id="menu"> 
    <a href="home.html">Home</a> - 
    <a href="one.html">One</a> - 
    <a href="two.html">Two</a> - 
    <a href="three.html">Three</a> 
</div> 
<div id="home" class="content"> 
    Home content. 
</div> 
<div id="one" class="content"> 
    One content. 
</div> 
<div id="two" class="content"> 
    Two content. 
</div> 
<div id="three" class="content"> 
    Three content. 
</div> 
</body> 
</html>

編輯

DOM方法承諾：

<html> 
<head> 
<style type="text/css"> 
.content { 
    display: none; 
} 
</style> 
<script type="text/javascript"> 

window.onload = function(){ 
    var links = document.getElementById('menu').getElementsByTagName('a'), 
     divs = document.getElementsByTagName('div'), 
     sections = [], 
     id = ''; 

    for (var i = 0, size = divs.length; i < size; i++) { 
     if (divs[i].className.indexOf('content') != -1) { 
      sections.push(divs[i]); 
     } 
    } 

    for (var i = 0, size = links.length; i < size; i++) { 
     id = links[i].href; 
     id = id.substring(id.lastIndexOf('/') + 1); 
     id = id.substring(0,id.indexOf('.')); 

     links[i].rel = id; 

     links[i].onclick = function(e){ 
      e.preventDefault(); 

      for (var p = 0, sections_size = sections.length; p < sections_size; p++) { 
       sections[p].style.display = 'none'; 
      } 

      document.getElementById(this.rel).style.display = 'block'; 
      location.hash = '#!/' + this.rel; 

      return false; 
     } 
    } 

    document.getElementById('home').style.display = 'block'; 
}; 

</script> 
</head> 
<body> 
<div id="menu"> 
    <a href="home.html">Home</a> - 
    <a href="one.html">One</a> - 
    <a href="two.html">Two</a> - 
    <a href="three.html">Three</a> 
</div> 
<div id="home" class="content"> 
    Home content. 
</div> 
<div id="one" class="content"> 
    One content. 
</div> 
<div id="two" class="content"> 
    Two content. 
</div> 
<div id="three" class="content"> 
    Three content. 
</div> 
</body> 
</html>

來源

2012-02-04 12:22:16

您可以隨時使用哈希URL，並設置這樣的網址：

function setHash(var hash) { 
    window.location.hash = hash; 
}

如果您想要檢索鏈接中的哈希以更新頁面，可以使用l IKE

function getHash() { 
    return window.location.hash; 
}

，並更新你可以簡單地使用頁面if語句是這樣的：[（！``＃）「hashbang」]

if(getHash() == "#main") { 
    document.getElementById('content').innerHtml = "<p>Main content</p>"; 
}

來源

2012-02-04 12:34:06 Obbidobbi

在更新地址字段時導航到無內容重新加載的新內容

回答

相關問題