多重溢出:具有隐藏内容的隐藏容器由链接同时切换 - multiple overflow:hidden containers with hidden content simultaneously toggled by links

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

内容容器使用溢出：hidden，以便一次只显示一个子div的。

我想让导航链接充当相关内容的激活器，滚动到容器中查看。

因此，例如，如果我要在导航上按Link2，我希望第一个内容框中的divanchor2二个内容框中的divancher2滚动查看。

参见下面的示例代码：

第一个内容框

  <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>

我的结论

如果我只通过导航控制一个内容框，我会使用唯一的锚点。这种方法不适用于我的困境，因为你只能指向链接中的一个锚，即使我在两个容器中放置相同的名称锚，浏览器也只能启动第一个容器锚，然后放弃。
我的想法是使用某种jquery脚本或php脚本来告诉所有容器滚动到特定的div类（例如div类anchor3）。这是一个理论，但我不知道这将如何运作。

我想，既然您哀叹无法使用ID，滚动某些内容的问题就不是主要话题。听起来你最关心的是如何获得相应实体的引用。JQuery使用CSS样式选择器，因此您应该能够使用"$(#page_informtion_box .anchor1")来选择（然后滚动到）信息框，使用"$("#page_identifer_box .anchor1")来选择（并滚动到）标识符分区。

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

我不知道你的CSS是什么，但你可以试试。。。CSS：

    #page_identifier_box{
        overflow:hidden;
        float:left;
        width:100px;
    }
     #page_information_box{
        overflow:hidden;
        float:left;
        width:200px;
     }
    .slide{
        width:100px;
        float:left;
    }
    .slide2{
        width:200px;
        float:left;
    }
    .inner{
        width:400px;
    }
    .inner2{
        width:800px;
    }

HTML:

    <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="inner">
              <div class="anchor1 slide">anchor1</div>
              <div class="anchor2 slide">anchor2</div>
              <div class="anchor3 slide">anchor3</div>
              <div class="anchor4 slide">anchor4</div>
          </div>
        </div>
        <div id="page_information_box">
  <div class="inner2">
      <div class="anchor1 slide2">anchor1</div>
      <div class="anchor2 slide2">anchor2</div>
      <div class="anchor3 slide2">anchor3</div>
      <div class="anchor4 slide2">anchor4</div>
  </div>
</div>

jQuery:

    $(document).ready(function () {
    $('.nav_link').click(function (e) {
        e.preventDefault();
        var s = $(this).find('a').attr('href');
        var m = 0;
        switch (s) {
            case 'anchor2':
                m = -100;
                break;
            case 'anchor3':
                m = -200;
                break;
            case 'anchor4':
                m = -300;
                break;
        }
        $('.inner').animate({ marginLeft: m + 'px' }, 850);
        $('.inner2').animate({ marginLeft: (m*2) + 'px' }, 750);
    });
});

这就是你要找的吗？

基于zgood的解决方案我已经设法进行了调整，以考虑容器宽度不同变化的可能性。这是我的解决方案，以防其他人在寻找它。

CSS代码

在本部分中，我们将page_indentifier_box和page_information box分开，并分别赋予它们自己独特的内部（&secondinternal）和幻灯片（&secondslide）属性。

#page_identifier_box{
overflow:hidden;
float:left;
width:100px;
}
.slide{
width:100px;
float:left;
}
.inner{
width:400px;
}
#page_information_box{
overflow:hidden;
float:left;
width:200px;
}
.secondslide{
width:200px;
float:left;
}
.secondinner{
width:800px;
}

JQuery代码

在本部分中，我们创建了一个新的var，在本例中为"var g"来控制第二个容器。

$(document).ready(function () {
$('.nav_link').click(function (e) {
    e.preventDefault();
    var s = $(this).find('a').attr('href');
    var m = "0px";
    switch (s) {
        case 'anchor2':
            m = "-100px";
            break;
        case 'anchor3':
            m = "-200px";
            break;
        case 'anchor4':
            m = "-300px";
            break;
    }
    var g = "0px";
    switch (s) {
        case 'anchor2':
            g = "-200px";
            break;
        case 'anchor3':
            g = "-400px";
            break;
        case 'anchor4':
            g = "-600px";
            break;
    }
    $('.inner').animate({ marginLeft: m }, 750);
    $('.secondinner').animate({ marginLeft: g }, 750);
});
});

HTML代码

在这里，我们再次为第二个容器调整html，以允许为第二容器使用上述新值。

<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="inner">
      <div class="anchor1 slide">anchor1</div>
      <div class="anchor2 slide">anchor2</div>
      <div class="anchor3 slide">anchor3</div>
      <div class="anchor4 slide">anchor4</div>
  </div>
</div>
<div id="page_information_box">
  <div class="secondinner">
      <div class="anchor1 secondslide">anchor1</div>
      <div class="anchor2 secondslide">anchor2</div>
      <div class="anchor3 secondslide">anchor3</div>
      <div class="anchor4 secondslide">anchor4</div>
  </div>
</div>

摘要

希望这一切都有意义。非常感谢zgood的帮助以及所有其他回复的人！