哈希隱藏的div - 直接訪問頁面URL

我的網站由4頁所有這些都只是CSS div的是那些獲得隱藏和基於頁面上的菜單欄上顯示。

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文件，我可以ACCES通過將的IT本地主機/ mysite的/ index.php文件

當我點擊任何鏈接，顯示/隱藏的div我的網址更改爲本地主機/ mysite的/ index.php文件＃

我不能似乎找到了通過URL直接訪問任何4個「頁面」的方法。

謝謝！

來源

2013-09-26 Eazy-E

您可以發佈您的代碼或它的相關的樣本？ –

我可以用路易斯和布賴恩的答案來解決這個問題。 –

Wesley - 我已將我的代碼添加到頁面。 –

這個可憐的人在做這將是這樣的方式：

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頁將是可見的。

來源

2013-09-26 21:04:14 Brian

謝謝！我喜歡.slice刪除＃符號。這是一個難以問的問題，因爲我真的不知道我在找什麼。 –

要獲得直接進入，只要找到散列的網址：

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

根據這個值，顯示正確的DIV。

網頁加載上偵聽對哈希變化; jQuery的爲您提供了一個漂亮的hashchanged事件：

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

這裏面的事件，提取您的哈希值，應存儲在window.location.hash。根據它的值，顯示/隱藏相應的div元素。

看到這個簡單的例子：http://jsfiddle.net/aUsHh/3/

來源

2013-09-26 21:04:02 Julio

謝謝，這正是我不明白的地方。我會盡量在將來更加具體地處理我的問題。 –

這正是我一直在尋找的東西，我也不知道怎麼說。幸運的是，Google搜索讓我看到了這個頁面。我認爲它應該重新開放。 – felwithe

哈希隱藏的div - 直接訪問頁面URL

回答

相關問題