1

我有一个 DIV 容器，其中包含两个向左浮动的 DIV。第二个 DIV 包含其他三个 DIV 的堆栈。当我单击第一个 DIV 中的链接时，我希望它滚动到下一个 DIV(id="red") 并显示适当的 DIV。例如，当我单击链接“scroll-to-2”时，我希望容器滚动到下一个 DIV(id="red") 并显示第二个 DIV，但隐藏第一个和第三个 DIV。我正在尝试使用 ScrollTo 插件。

这是我在 jsfiddle 中所做的开始。 http://jsfiddle.net/psivadasan/n9J57/2/

感谢任何帮助。

HTML

<div class="container">
<div class="scrollable">
    <div id="blue" class="gray">
        <a class="scroll-1" href="#">Scroll to 1</a>
        <a class="scroll-2" href="#">Scroll to 2</a>
        <a class="scroll-3" href="#">Scroll to 3</a>
    </div>
    <div id="red" class="red">
        <div class="card">1</div>
        <div class="card">2</div>
        <div class="card">3</div>
    </div>
</div>

JS

$(‘#scroll-link-1’).click (function () {
$.scrollTo(‘#red’, 1000)});

CSS

.container {width: 400px;height: 200px;overflow-x: scroll;overflow-y: hidden;}.scrollable {width: 800px;height: 200px;}.gray {width: 400px; height: 200px;background-color: gray; float: left;}.red {width: 400px; height: 200px;background-color: red; float: left;}.card {width: 400px; height: 200px; position: absolute;}
4

0 回答 0