Schiebe Paneele aktiviert durch Links

Question

Ich habe drei Links. Ich möchte, dass jeder Link einen separaten DIV steuert (ich vermute in einem Container DIV). Wenn Sie also die Seite mit DIV-1 öffnen, können Sie auf den Link für DIV-2 oder 3 klicken und die Ansicht wird zu diesem DIV verschoben.

Wie ist das in jQuery möglich? Ich habe scrollleft vergeblich versucht.

Dank im Voraus,

Stu

Answer 1

Mit der Methode .animate() an den Rand des ersten Child-Cell.

Klasse "Zelle" besteht aus 200x200 Boxen, alle schwebten nach links. ID "Container" ist auch 200x200, mit einem Überlauf von versteckt. Sie könnten drei Links zuweisen, um den linken Rand des ersten Div mit der Klasse "cell" zu animieren, der alle drei nach links oder rechts verschoben wird, abhängig von der gewünschten Menge.

Link1 -> erster Div-Rand links = 0;
Link2 -> erste Div Margin Left = -200;
Link3 -> erste Div Margin Left = - 400;

---

Update: Der folgende Code wurde als Antwort aktualisiert innerhalb der Kommentare Fragen zu verfolgen.

Ich habe die Zellen in einem anderen div eingeschlossen. Dieses div befindet sich innerhalb des Containers. Anstatt den linken Rand der ersten Zelle zu manipulieren, manipulieren wir den linken Rand des div, in dem sich diese Zellen befinden. Gib mir eine Chance - ich habe es ausprobiert und die gewünschten Ergebnisse erzielt.

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