Pannelli scorrevoli attivati ??da Link

Question

Ho tre collegamenti. Voglio che ogni collegamento controlli un DIV separato (immagino all'interno di un DIV contenitore). Quindi quando apri la pagina hai DIV-1, puoi fare clic sul collegamento per DIV-2 o 3 e la vista scorrerà o scorrerà fino a quel DIV.

Come è possibile in jQuery? Ho provato scrollleft inutilmente.

Grazie in anticipo,

Stu

Answer 1

Utilizza il metodo .animate () ai margini della prima cella figlio.

Classe "cella" è composto da scatole da 200x200, tutte flottanti a sinistra. ID "contenitore" è anche 200x200, con un overflow di nascosto. Puoi assegnare tre collegamenti per animare il margine sinistro del primo div con la classe "cella", " che si sposterebbe tutti e tre a sinistra o a destra, a seconda della quantità desiderata.

Link1 - > Margine First Div a sinistra = 0;
Link2 - > Margine First Div a sinistra = -200;
Link3 - > Margine della prima divisione a sinistra = - 400;

---

Aggiornamento: il seguente codice è stato aggiornato in risposta a domande di follow-up all'interno dei commenti.

Ho racchiuso le celle in un altro div. Questo div è all'interno del contenitore. Invece di manipolare il margine sinistro della prima cella, manipoleremo il margine sinistro del div in cui risiedono queste celle. Prova questo: l'ho provato e ho ottenuto i risultati desiderati.

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