0

我有如下 3 个 div 和如下 3 个链接。

分区

<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 -> 显示div 1

点击link2 -> 显示div 2

点击link3 -> 显示div 3

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

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

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

4

2 回答 2

0

你必须为你的 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;
    }

最重要的是：float:left；试试看

查看我自己的滚动条：http: //dap.ntua.gr/el http://dap.ntua.gr/el/template/js/scroller.js

于 2013-05-08T10:50:31.753 回答
0

我得到了这个检查下面的代码和小提琴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>
于 2013-05-08T11:05:05.337 回答