php - 多次溢出 :hidden containers with hidden content simultaneously toggled by links

Question

在我的页面上，我有一个导航菜单和两个内容容器。

内容容器使用overflow:hidden 以便一次只有一个子div 显示。

我希望导航链接充当相关内容的激活器，以便在容器中滚动查看。

因此，例如，如果我要在导航中按 Link2，我想在 First Content Box 和 中放置 div anchor2 第二个内容框中的 anchor2 滚动查看。

参见下面的示例代码:

导航

  <div id="navigation">
  <div class="nav_link"><a href="anchor1">Link1</a></div>
  <div class="nav_link"><a href="anchor2">Link2</a></div>
  <div class="nav_link"><a href="anchor3">Link3</a></div>
  <div class="nav_link"><a href="anchor4">Link4</a></div>
  </div>

第一个内容框

  <div id="page_identifier_box">
  <div class="anchor1"></div>
  <div class="anchor2"></div>
  <div class="anchor3"></div>
  <div class="anchor4"></div>
  </div>

第二个内容框

  <div id="page_information_box">
  <div class="anchor1"></div>
  <div class="anchor2"></div>
  <div class="anchor3"></div>
  <div class="anchor4"></div>
  </div>

我的结论

1. 如果我只通过导航控制一个内容框，我会使用独特的 anchor 。这种方法不适用于我的困境，因为你只能指向一个链接中的一个 anchor ，即使我在两个容器中放置相同名称的 anchor ，浏览器也只会启动第一个容器 anchor ，然后放弃。

2. 我的想法是使用某种 jquery 脚本或 php 脚本告诉所有容器滚动到特定的 div 类(例如 div 类 anchor3)。这是一个理论，但我不知道它是如何运作的。

Answer 1

我猜，既然您对无法使用 ID 感到遗憾，那么滚动某些内容的问题就不是主要话题。听起来您最关心的是如何获取相应实体的引用。 JQuery 使用 CSS 样式选择器，因此您应该能够执行 "$(#page_informtion_box .anchor1") 来选择(然后滚动到)信息框和 "$("#page_identifer_box .anchor1") 选择(并滚动到)标识符 div。

您可以根据单击的菜单项为每个构建 jquery 选择器。