Раздвижные панели, активируемые ссылками

Question

У меня есть три ссылки.Я хочу, чтобы каждая ссылка управляла отдельным DIV (я думаю, внутри контейнера DIV).Поэтому, когда вы открываете страницу, у вас есть DIV-1, вы можете щелкнуть ссылку для DIV-2 или 3, и представление будет скользить или прокручиваться до этого DIV.

Как это возможно в jQuery?Я пробовал прокручивать влево, но безрезультатно.

Заранее спасибо,

Стью

Answer 1

Использовать .анимировать() метод на границах первой дочерней ячейки.

Класс «ячейка» состоит из блоков 200x200, все сдвинуты влево.ID "контейнера" ​​тоже 200х200, переполнение скрыто.Вы можете назначить три ссылки для анимации поля слева от первого элемента div, имеющего класс «ячейка», который будет перемещать все три влево или вправо, в зависимости от желаемой величины.

Link1 -> Первое поле деления слева = 0;
Link2 -> Левое поле первого деления = -200;
Link3 -> Левое поле первого деления = - 400;

---

Обновлять:Следующий код был обновлен в ответ на дополнительные вопросы в комментариях.

Я заключил ячейки в другой 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>