Jquery 由连杆激活的滑动面板
我有三个链接。我希望每个链接控制一个单独的DIV（我猜是在容器DIV中）。因此，当您打开有DIV-1的页面时，您可以单击DIV-2或DIV-3的链接，视图将滑动或滚动到该DIV 在jQuery中这是怎么可能的？我试着离开，但没有用 提前感谢, Stu在第一个子单元格的边缘使用该方法 “单元”类由200x200个框组成，全部向左浮动。ID“container”也是200x200，有一个隐藏的溢出。您可以指定三个链接来设置第一个div的左边距的动画，该div具有类“cell”，这将根据您想要的数量向左或向右移动所有三个 Link1->第一个Div左边距=0Jquery 由连杆激活的滑动面板,jquery,animation,scroll,slide,Jquery,Animation,Scroll,Slide,我有三个链接。我希望每个链接控制一个单独的DIV（我猜是在容器DIV中）。因此，当您打开有DIV-1的页面时，您可以单击DIV-2或DIV-3的链接，视图将滑动或滚动到该DIV 在jQuery中这是怎么可能的？我试着离开，但没有用 提前感谢, Stu在第一个子单元格的边缘使用该方法 “单元”类由200x200个框组成，全部向左浮动。ID“container”也是200x200，有一个隐藏的溢出。您可以指定三个链接来设置第一个div的左边距的动画，该div具有类“cell”，这将根据您想要的数量向
Link2->第一个Div左边距=-200
Link3->左第一个Div边距=-400
更新：以下代码已更新，以回应评论中的后续问题。 我把这些单元格放在另一个分区里。这个分区在容器里。我们不需要操纵第一个单元格的左边距，而是要操纵这些单元格所在的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>
div#容器{宽度：200px；高度：200px；溢出：隐藏；}
分区单元{宽度：600px；高度：200px；}
div.cell{float:左；宽度：200px；高度：200px；边距：0；填充：0；}
div.cell p{margin:0；padding:0；}
第1单元
第2单元
第三单元
$（文档）.ready（函数（）{
$（“a.box-mover:eq（0）”。单击（函数（事件）{
event.preventDefault（）；
$（“div.cells”）.animate（{“marginLeft”：“0px”}，“slow”）；
});
$（“a.box-mover:eq（1）”）。单击（函数（事件）{
event.preventDefault（）；
$（“div.cells”）.animate（{“marginLeft”：“-200px”}，“slow”）；
});
$（“a.box-mover:eq（2）”）。单击（函数（事件）{
event.preventDefault（）；
$（“div.cells”）.animate（{“marginLeft”：“-400px”}，“slow”）；
});
});