由链接激活的滑动面板

Question

我有三个链接。我希望每个链接控制一个单独的 DIV（我猜是在容器 DIV 中）。因此，当您打开您拥有 DIV-1 的页面时，您可以单击 DIV-2 或 3 的链接，视图将滑动或滚动到该 DIV。

这在 jQuery 中怎么可能？我试过 scrollleft 无济于事。

提前致谢，

学习

Answer 1

在第一个子单元格的边缘使用.animate() 方法。

“单元格”类由 200x200 的框组成，全部向左浮动。 ID“容器”也是 200x200，带有隐藏溢出。您可以分配三个链接来为具有“单元格”类的第一个 div 的左边距设置动画，这将向左或向右移动所有三个，具体取决于您想要的数量。

Link1 -> 第一个 div 左边距 = 0;
Link2 -> 第一个 div 左边距 = -200;
Link3 -> 第一个 div 左边距 = - 400;

---

更新：以下代码已更新，以响应 cmets 中的后续问题。

我已将单元格包含在另一个 div 中。这个 div 在容器内。我们将不操纵第一个单元格的左边距，而是操纵这些单元格所在的 div 的左边距。试一试 - 我已经尝试过了，得到了想要的结果。

<style type="text/css">
  div#container { width:200px;height:200px;overflow:hidden; }
  div.cells { width:600px;height:200px;}
  div.cell { float:left;width:200px;height:200px;margin:0;padding:0; }
  div.cell p {margin:0;padding:0;}
</style>

<ul>
  <li><a href="#" class="box-mover">Show Box 1</a></li>
  <li><a href="#" class="box-mover">Show Box 2</a></li>
  <li><a href="#" class="box-mover">Show Box 3</a></li>
</ul>

<div id="container">
  <div class="cells">
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 1</p>
    </div>
    <div class="cell" style="background:#cc0000;color:#ffffff;">
      <p>Cell 2</p>
    </div>
    <div class="cell" style="background:#f1f1f1;">
      <p>Cell 3</p>
    </div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){

    $("a.box-mover:eq(0)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "0px"}, "slow");
    });
    $("a.box-mover:eq(1)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-200px"}, "slow");
    });
    $("a.box-mover:eq(2)").click(function(event){
      event.preventDefault();
      $("div.cells").animate({"marginLeft": "-400px"}, "slow");
    });

  });
</script>