Panneaux coulissants activés par des liens

Question

J'ai trois liens. Je veux que chaque lien contrôle un DIV séparé (je suppose dans un conteneur DIV). Donc, quand vous ouvrez la page, vous avez DIV-1, alors vous pouvez cliquer sur le lien pour DIV-2 ou 3 et la vue va glisser ou faire défiler jusqu'à DIV.

Comment cela est-il possible dans jQuery? J'ai essayé scrollleft en vain.

Merci à l'avance,

Stu

Answer 1

Utilisez la méthode .animate() sur les marges de la première cellule enfant.

La classe "cellule" est constituée de boîtes de 200x200, toutes flottantes à gauche. ID "container" est aussi 200x200, avec un débordement de caché. Vous pouvez assigner trois liens pour animer la marge gauche de la première div ayant la classe "cellule", qui se déplacerait tous les trois à gauche ou à droite, selon la quantité que vous voulez.

Liaison 1 -> Marge première division gauche = 0;
Lien2 -> Marge première division gauche = -200;
Link3 -> Marge First Div Gauche = - 400;

---

Mise à jour: Le code suivant a été mis à jour en réponse à des questions de suivi dans les commentaires.

J'ai inclus les cellules dans un autre div. Cette div est dans le conteneur. Plutôt que de manipuler la marge gauche de la première cellule, nous allons manipuler la marge gauche de la div dans laquelle ces cellules résident. Donnez un coup de feu - je l'ai essayé et obtenu les résultats souhaités.

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