通過URL重定向錨點以指定加載

在我們的網站上，我們有一個頁面，其中有5個圖像是按鈕。點擊每個按鈕時，使用onclick功能會顯示更詳細的信息。通過URL重定向錨點以指定加載

我們想要做的是從URL www.example.com#program中獲取錨點信息，然後使用該錨點來指定我們想要加載哪個onload。

所以理論上，www.example.com#program將執行這樣的：

<img src="program.png" width="159" height="115" 

    onload= 
    "ShowHide('ACE', 'hidden'); 
    ShowHide('program', 'visible'); 
    ShowHide('ACE2', 'hidden'); 
    ShowHide('ACE3', 'hidden'); 
    ShowHide('ACE4', 'hidden'); "/>

而且www.example.com#ACE將執行這樣的：

<img src="ACE.png" width="159" height="115" 

    onload= 
    "ShowHide('ACE', 'visible'); 
    ShowHide('program', 'hidden'); 
    ShowHide('ACE2', 'hidden'); 
    ShowHide('ACE3', 'hidden'); 
    ShowHide('ACE4', 'hidden'); "/>

任何幫助將不勝感激！

來源

2015-05-18 Anthony

如果你留意對哈希，你可以做到這一點更動態：

var sections = ['ACE', 'program', 'ACE2', 'ACE3', 'ACE4']; 

window.onhashchange = function(evt) { 
    var hash = location.hash.substr(1); 
    // iterate sections and make section at location.hash visible 
    sections.forEach(function(section) { 
     var visibility = 'hidden'; 
     if(section === hash) { 
     visibility = 'visible'; 
     } 
     ShowHide(section, visibility); 
    }); 
};

您可以查看這個這裏演示：https://jsfiddle.net/a41j5ed7/，打開控制檯，看看哪些項目是可見的，哪些是隱。

由於您已經爲每個圖像按鈕設置了onclick，因此您需要在用戶單擊按鈕時更新哈希值。你沒有發佈處理圖像按鈕點擊的代碼，但它會是這樣的：

imageButton.onclick = function() { 
    // whatever you are currently doing when the user clicks the image button 
    location.hash = 'ACE'; // or whichever button they clicked 
}

來源

2015-05-18 18:07:37

謝謝你工作完美！我所要做的就是添加滾動功能，因爲它會跳到頁面上。 – Anthony

那麼它的作品。當我在頁面上，手動輸入哈希'www.example.com＃ACE'時，它會加載完美。當我通過社交媒體帖子輸入相同網址的頁面時，它不會加載。 – Anthony

你需要在你的按鈕onclick中調用'location.hash ='ACE''等來更新hash –

通過URL重定向錨點以指定加載

回答

相關問題