如何讓導航完整的ajax？

我有問題。如何讓導航完整的ajax？

我訪問了一個網站：http://currenthiphop.com/。當我點擊鏈接時，地址欄上的鏈接更改爲http://currenthiphop.com/#!/ +鏈接。（如Twitter，Faceboook ...）

但是，在屬性href，沒有#!。爲什麼？

是ajax導航不是嗎？我該如何做這樣的事情？

謝謝

來源

2011-03-22 Steffi

這讓你開始。

http://jsfiddle.net/f6dBV/

編輯 - 的jsfiddle實際上是不顯示的location.hash位。這是它在我的網站上：http://jfcoder.com/test/hash.html

<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>

來源

2011-03-22 23:24:26

噢，謝謝。怎麼樣SEO？ – Steffi 2011-03-23 12:47:03

@Steffi - 我認爲你的問題與這個不同，所以你可能會考慮打開一個新的問題，並詢問這種URL修改是否會影響SEO。你的頁面內鏈接仍然完好無損，所以我會想象SEO會得到改善。不過，我不是SEO專家。此外，這只是一個起點。有很多方法可以實現（例如通過$ .get（）獲取內容），以及根據需求和其他考慮可以優化的一些其他方式。 – 2011-03-23 22:50:54

http://jfcoder.com/test/hash.html - 404錯誤，頁面未找到。 – dzerow 2015-01-09 11:54:04

它是location.hash。就像Facebook一樣，它是用javascript製作的。它用於避免使用GET並重新加載頁面。

basic example - 在php頁面和JavaScript文件夾中有一些圖像（1.png，2.png等）。像Facebook（前段時間），如果您複製鏈接並粘貼，js會檢查是否存在散列並將您重定向到想要的圖像。代碼是舊的，並不是最好的。

來源

2011-03-22 22:51:06 Bakudan

因此，它用於避免重新加載頁面。太好了！我們怎麼做到這一點？ – Steffi 2011-03-22 22:53:13

感謝Jared Farrish。

我有一個額外的額外添加，這將允許您刷新頁面後獲取活動內容。

$(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); 
    }); 
    active_page = location.hash.substring(location.hash.lastIndexOf('/')+1) 
    if (active_page=='') 
    { 
     active_page='home' 
    } 
    $('#'+active_page).show(); 
    $('#menu a').click(function(e){ 
     e.preventDefault(); 
     $('.content').hide(); 
     $('#'+$(this).attr('rel')).show(); 
     location.hash = '#!/'+$(this).attr('rel'); 
     return false;

來源

2014-02-07 23:10:13

如何讓導航完整的ajax？

回答

相關問題