Question

在我们的网站上，我们有一个页面，其中有5个按钮图像。单击每个按钮时，使用onclick功能会显示更详细的信息。

我们想要做的是从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'); "/>

非常感谢任何帮助！

Answer 1

如果您观察哈希值的更改，可以更加动态地执行此操作：

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
}

从URL重定向锚点以指定Onload

1 个答案: