내비게이션 전체 아약스를 갖는 방법?

질문이 있습니다.내비게이션 전체 아약스를 갖는 방법?

사이트를 방문한 사람 : http://currenthiphop.com/. 그리고 링크를 클릭하면 주소 표시 줄의 링크가 http://currenthiphop.com/#!/ + 링크로 변경됩니다. (예 : Twitter, Faceboook ...)

그러나 속성 href에는 #!이 없습니다. 왜 ?

아약스 항법이 아닙니까? 어떻게하면됩니까?

감사합니다.

출처

2011-03-22 Steffi

이렇게하면 시작해야합니다.

http://jsfiddle.net/f6dBV/

편집 - jsFiddle 실제로에 location.hash 비트 표시되지 않습니다. 여기 내 웹 사이트에 있습니다 : 자레드 Farrish에 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

@Steffi - 귀하의 질문이 이번 질문과 다르다고 생각합니다. 따라서 새로운 질문을 열고이 유형의 URL 수정이 SEO에 영향을 주는지 묻는 것이 좋습니다. 인 페이지 링크는 그대로 유지되므로 SEO가 개선 될 것이라고 생각합니다. 그러나 나는 SEO 전문가가 아니다. 또한 이것은 단지 출발점 일뿐입니다. (예 : $ .get()을 통해 콘텐츠를 가져 오는) 여러 가지 방법과 요구 사항 및 기타 고려 사항에 따라 최적화 할 수있는 다른 방법이 있습니다. –

http://jfcoder.com/test/hash.html - 404 오류, 페이지를 찾을 수 없습니다. – dzerow

이것은 location.hash입니다. 페이스 북 에서처럼 자바 스크립트로 만들어진다. GET의 사용을 피하고 페이지를 다시로드하는 데 사용됩니다.

basic example - php 페이지와 자바 스크립트가있는 폴더에는 몇 가지 이미지 (1.png, 2.png ... 등)가 있습니다. 페이스 북과 마찬가지로 (얼마 전) 링크를 복사하여 붙여 넣으면 js는 해시가 있는지 확인하고 원하는 이미지로 리디렉션합니다. 코드가 오래되었고, 최선이 아닙니다.

출처

2011-03-22 22:51:06 Bakudan

페이지 재로드를 피하기 위해 사용됩니다. 좋아! 어떻게 할 수 있니? – Steffi

감사합니다.

페이지를 새로 고침 한 후 활성 콘텐츠를 얻을 수있는 약간의 추가 기능이 있습니다.

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

내비게이션 전체 아약스를 갖는 방법?

답변

관련 문제