链接到另一个页面,执行函数,然后跳转到锚点

时间:2022-05-31 21:14:04

I have two pages. The first has a slideshow that allows me to add links for each slide. The second page has numerous expanding div's that are expandable/collapsible onclick using this show/hide function:

我有两页。第一个是幻灯片,允许我为每张幻灯片添加链接。第二页有许多扩展div,可使用此显示/隐藏功能进行扩展/可折叠:

 function showtxt(divID) {
   var item = document.getElementById(divID);
   if (item) {
     item.className=(item.className=='hidetxt')?'showtxt':'hidetxt';
   }
 }

Then each expanding/collapsing div on that page has its own function to call it when clicked:

然后,该页面上的每个展开/折叠div都有自己的功能,可在单击时调用它:

function ANCHORbutton() { 
  var img = document.getElementById('expANCHORbutton').src;
  if (img.indexOf('plus.png')!=-1) { 
    document.getElementById('expANCHORbutton').src  = 'minus.png'; 
  }
  else { 
    document.getElementById('expANCHORbutton').src = 'plus.png'; 
  } 
}

What I'd like to do, if possible, is link each slide from that slideshow to the second page, expand the corresponding div, and then jump down the page to the specified anchor.

如果可能的话,我想做的是将每张幻灯片从幻灯片链接到第二页,展开相应的div,然后将页面跳到指定的锚点。

If I didn't have everything collapsed, it'd be a simple href="http://domain.com/page2.html#ANCHOR", but I'm struggling with how to expand the appropriate section before jumping to my anchor.

如果我没有崩溃的东西,那就是一个简单的href =“http://domain.com/page2.html#ANCHOR”,但我在努力扩展相应的部分,然后才跳到我的锚点。

1 个解决方案

#1


0  

Problem 1: Collapsed divs all show so no need for browser to scroll
Problem 2: Hidden divs are not being scrolled to since they are hidden.

问题1:折叠的div全部显示,因此不需要浏览器滚动问题2:隐藏的div没有滚动到,因为它们是隐藏的。

Solution could be this at the bottom of the page (onload does not trigger on reload on some browsers)

解决方案可能是在页面底部(onload在某些浏览器上重新加载时不会触发)

<script>
var hash = location.hash;
if (hash) {
  var divID = hash.substring(1); // remove the #
  showtxt(divID);
  document.getElementById(divID).scrollIntoView();
}
</script>
</body>

Update to add 100px:

更新以添加100px:

var hash = location.hash;
if (hash) {
  var divID = hash.substring(1); // remove the #
  showtxt(divID);
  var div = document.getElementById(divID); 
  div.scrollIntoView(); 
  div.style.top=(parseInt(div.style.top,10)+100)+"px"; 
}

#1


0  

Problem 1: Collapsed divs all show so no need for browser to scroll
Problem 2: Hidden divs are not being scrolled to since they are hidden.

问题1:折叠的div全部显示,因此不需要浏览器滚动问题2:隐藏的div没有滚动到,因为它们是隐藏的。

Solution could be this at the bottom of the page (onload does not trigger on reload on some browsers)

解决方案可能是在页面底部(onload在某些浏览器上重新加载时不会触发)

<script>
var hash = location.hash;
if (hash) {
  var divID = hash.substring(1); // remove the #
  showtxt(divID);
  document.getElementById(divID).scrollIntoView();
}
</script>
</body>

Update to add 100px:

更新以添加100px:

var hash = location.hash;
if (hash) {
  var divID = hash.substring(1); // remove the #
  showtxt(divID);
  var div = document.getElementById(divID); 
  div.scrollIntoView(); 
  div.style.top=(parseInt(div.style.top,10)+100)+"px"; 
}