水平滚动到DIV并在里面显示特定的DIV

Question

我有一个DIV容器，其中包含两个向左浮动的DIV。第二个DIV包含三个其他DIV的堆栈。当我单击第一个DIV内的链接时，我希望它滚动到下一个DIV（id =“red”）并显示相应的DIV。例如，当我点击“滚动到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;}