изменение адреса без загрузки новой страницы

Question

Для моего сайта с одной страницей у меня есть индекс проектов. Если щелкнуть проект, откроется слайд-шоу на той же странице. Таким образом, в основном, у меня есть только один URL-адрес, и если кто-то хочет ссылаться на конкретный проект, они не могут.

Я пытаюсь сделать так, чтобы, щелкнув по проекту, он изменит URL. И так, чтобы URL-адрес можно было использовать для доступа к моему сайту с открытием этого проекта.

Here - ссылка на то, что у меня есть.

Для справки, я пытаюсь достичь чего-то, что находится на этом site.

Я нашел несколько хороших предложений here, но что происходит, когда я использую что-то вроде этого (ниже), создается новый URL-адрес, но он не открывает проект, если я размещаю этот URL-адрес в браузере.

<a href="#" id='click'>Click to change url to bar.html</a> 

<script type="text/javascript"> 
var stateObj = { foo: "bar" }; 
function change_my_url() 
{ 
    history.pushState(stateObj, "page 2", "bar.html"); 
} 
var link = document.getElementById('click'); 
link.addEventListener('click', change_my_url, false); 
</script> 

Answer 1

Вы можете использовать id на элементах, которые имеют слайд-шоу в качестве уникального URL; при .ready() запуска анимации элемента, где id соответствует .location.hash

$().ready(function() { 
    // `location.hash`: `id`: `#slideshow1` of element linked to 
    // from, e.g., `http://example.com/#slideshow1` 
    var currentSlideshow = $(location.hash); 
    // do slideshow stuff at `currentSlideshow`: `#slideshow1` element 
}) 

Answer 2

function processAjaxData(response, urlPath){ 
    document.getElementById("content").innerHTML = response.html; 
    document.title = response.pageTitle; 
    window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath); 
} 

Вы можете использовать `window.onpopstate ощущать назад/вперед Кнопка навигации

window.onpopstate = function(e){ 
    if(e.state){ 
     document.getElementById("content").innerHTML = e.state.html; 
     document.title = e.state.pageTitle; 
    } 
}; 

Я был бы признателен за кого-то с более высокой квалификации чтобы проверить это для меня

Answer 3

Использование хеша может работать b est в этом случае

$(document).ready(function({ 

    //loading a page 
    var project = window.location.hash 
    yourProjectLoadFunction(project);   

    //setting a url 
    $('.number').click(function(e){ 
     $this = $(this); 
     window.location.hash = $this.attr('id'); 
    }); 
});