Question

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

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

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

所以，例如，如果我要在导航中按 Link2 ，我想在第一个内容框和中分组 anchor2 第二个内容框中的anchor2 以滚动查看。

请参阅下面的示例代码：

第一内容框

  <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）。这是一个理论，但我不知道这是如何工作的。

Answer 1

我要猜测，因为你感到无法使用ID，滚动的问题不是主题。听起来你最关心的是如何获得相应实体的引用。 JQuery使用CSS样式选择器，因此您应该能够"$(#page_informtion_box .anchor1")选择（然后滚动到）信息框，"$("#page_identifer_box .anchor1")选择（并滚动到）标识符div。

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

Answer 2

我不知道你的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);
    });
});

这就是你要找的东西吗？

Answer 3

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

CSS代码

在这部分中，我们将page_indentifier_box和page_information框分开，并为每个框提供独特的内部（＆amp; secondinner）和幻灯片（＆amp; 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 的帮助以及所有其他回复的答案！

多重溢出：隐藏内容同时由链接切换的隐藏内容

导航

第一内容框

第二内容框

我的结论

3 个答案: