Хеш, чтобы скрыть divs - прямой доступ к URL страницы

Question

Я разрабатываю веб-сайт, и у меня возникла следующая проблема.

Мой сайт состоит из 4 страниц, все из которых являются только css div, которые скрываются и отображаются на основе строки меню на странице.

Вот мой пример: http://jsfiddle.net/DcwUu/

HTML:

<button class="home-button">Home</button> 
<button class="download-button">Download</button> 
<button class="about-button">About</button> 
<button class="contact-button">Contact</button> 

<div class="home-container"> 
    <div class="left-corner"></div> 
    This is the home page! 
</div> 

<div class="download-container"> 
    <div class="left-corner"></div> 
    This is the download page! 
</div> 
<div class="about-container"> 
    <div class="left-corner"></div> 
    This is the about page! 
</div> 
<div class="contact-container"> 
    <div class="left-corner"></div> 
    This is the contact page! 
</div> 

JQuery:

$('.home-button').click(
    function(){ 
     $('.home-container').show(); 
     $('.download-container').hide(); 
     $('.about-container').hide(); 
     $('.contact-container').hide(); 
    } 
); 
$('.download-button').click(
    function(){ 
     $('.download-container').show(); 
     $('.about-container').hide(); 
     $('.contact-container').hide(); 
     $('.home-container').hide(); 
    } 
); 
$('.about-button').click(
    function(){ 
     $('.about-container').show(); 
     $('.contact-container').hide(); 
     $('.download-container').hide(); 
     $('.home-container').hide();   
    } 
); 
$('.contact-button').click(
    function(){ 
     $('.contact-container').show(); 
     $('.home-container').hide();  
     $('.download-container').hide(); 
     $('.about-container').hide(); 
    } 
); 

CSS:

.download-container {display:none;} 
.about-container {display:none;} 
.contact-container {display:none;} 
.home {display:block;} 

Мой Главная является index.php, и я могу Доступ оно что, перейдя в локального/MySite/index.php

При нажатии на любую ссылку и показать/скрыть DIVS моих изменений URL в локального/MySite/index.php #

я не могу похоже, найти способ прямого доступа к любой из 4 "страниц" по URL.

Спасибо!

Answer 1

путь бедного человека делать это было бы что-то вроде этого:

var hash = window.location.hash.slice(1); 
$('.page').hide(); 
$('#' + hash).show(); 

Итак, учитывая страницы, как это,

<div class="page" id="main"></div> 
<div class="page" id="foo"></div> 
<div class="page" id="bar"></div> 
<div class="page" id="baz"></div> 

и если пользователь перейдет на localhost/mysite/#foo, тогда будет видна страница foo.

Answer 2

Чтобы получить прямой доступ, просто найти хэш в URL:

var hash = window.location.hash 
$(hash).show(); 

В зависимости от этого значения, показать правильный DIV.

Для изменений на загруженной странице послушайте изменения хеша; JQuery предоставляет вам отличное hashchanged события:

$(window).on('hashchange', function() { 
    .. work .. 
}); 

Внутри этого события, распаковывает хэш, который должен быть сохранен в window.location.hash. В зависимости от его значения, отобразите/скройте соответствующий элемент div.

Смотрите этот простой пример: http://jsfiddle.net/aUsHh/3/