Question

我有3个div，如下所示，3个链接如下。

的div

<div id="div1">
   Div 1   
</div>

<div id="div2">
    Div 2 
</div>

<div id="div3">
    Div 3 
</div>

链接

<a id="link1" href="#">Link 1</a>
<a id="link2" href="#">Link 2</a>
<a id="link3" href="#">Link 2</a>

我要做的是创建一个滑块。当我

点击link1 - ＆gt; show div 1

点击link2 - ＆gt; show div 2

点击link3 - ＆gt; show div 3

另外，我试图让它像滑块一样运行。在一个滑块它只有上一个和下一个链接在这里我有多个链接。每个链接都有一个相应的div。

JsFiddle链接是：http://jsfiddle.net/n4p4x/1/

你能告诉我哪里出错了吗？

Answer 1

你必须设置div的样式

 <div id="main">
      <div class="slice" id="slide_1"></div><div class="slice" id="slide_2"></div><div class="slice" id="slide_3"></div>

    </div>
    #main{
    position:relative;
}
    .slice{
    float:left;
    width:200px;
    height:200px;
    overflow:hidden;
    }

最重要的是：浮动：左;试试吧

查看我自己的卷轴：http://dap.ntua.gr/el http://dap.ntua.gr/el/template/js/scroller.js

Answer 2

我在下面的代码中检查了这个小提琴http://jsfiddle.net/sarfarazdesigner/n4p4x/2/

它解决了你的问题？让我知道我根据你的问题理解了我的意思。

#main{
    position:relative;
    overflow:hidden;
    width:960px;
    margin:50px auto 0;
}
#main div{
    float:left;
    width:200px;
    height:200px;
    overflow:hidden;
}

<强> HTML

<a id="link1" href="#">Link 1</a><br/>
<a id="link2" href="#">Link 2</a><br/>
<a id="link3" href="#">Link 2</a>

<br/><br/><br/>
<div id="main">
    <div id="div1">
        Div 1 - In feugiat cursus velit et accumsan. Morbi eu ligula ac libero vestibulum molestie eget in diam. Fusce quis urna sit amet metus accumsan consectetur a quis odio. Donec tempor hendrerit mauris at venenatis. Etiam eu nisi ligula, eu viverra eros. Pellentesque vehicula ultricies consectetur. Praesent vehicula libero sit amet nulla sollicitudin placerat. Praesent eu elit arcu. Nullam tincidunt tortor quis justo pharetra id dictum felis auctor. Integer dapibus luctus dictum. Morbi pellentesque sagittis faucibus. Phasellus placerat semper malesuada. Praesent pulvinar tristique urna, ut sollicitudin dui convallis mollis. Praesent cursus venenatis risus, nec adipiscing sapien rhoncus in.   
    </div>

    <div id="div2">
        Div 2 - In feugiat cursus velit et accumsan. Morbi eu ligula ac libero vestibulum molestie eget in diam. Fusce quis urna sit amet metus accumsan consectetur a quis odio. Donec tempor hendrerit mauris at venenatis. Etiam eu nisi ligula, eu viverra eros. Pellentesque vehicula ultricies consectetur. Praesent vehicula libero sit amet nulla sollicitudin placerat. Praesent eu elit arcu. Nullam tincidunt tortor quis justo pharetra id dictum felis auctor. Integer dapibus luctus dictum. Morbi pellentesque sagittis faucibus. Phasellus placerat semper malesuada. Praesent pulvinar tristique urna, ut sollicitudin dui convallis mollis. Praesent cursus venenatis risus, nec adipiscing sapien rhoncus in.   
    </div>

    <div id="div3">
        Div 3 - In feugiat cursus velit et accumsan. Morbi eu ligula ac libero vestibulum molestie eget in diam. Fusce quis urna sit amet metus accumsan consectetur a quis odio. Donec tempor hendrerit mauris at venenatis. Etiam eu nisi ligula, eu viverra eros. Pellentesque vehicula ultricies consectetur. Praesent vehicula libero sit amet nulla sollicitudin placerat. Praesent eu elit arcu. Nullam tincidunt tortor quis justo pharetra id dictum felis auctor. Integer dapibus luctus dictum. Morbi pellentesque sagittis faucibus. Phasellus placerat semper malesuada. Praesent pulvinar tristique urna, ut sollicitudin dui convallis mollis. Praesent cursus venenatis risus, nec adipiscing sapien rhoncus in.   
    </div>

</div>

Scroll Divs就像滑块一样

2 个答案: