通过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重定向锚点以指定加载

回答

相关问题