Question

我想创建一个按钮列表，例如一个X个迷你球，基于一个数字X的div进入一个容器。我想要这个：

∞∞∞∞

基于多个div。

并且每个按钮都有一个div的位置（带有动画滚动条），如果我点击其中一个项目，我将转到这个与div相关联的位置。

例如：

<div id="scroller">
<div id="content">number1</div>
<div id="content">number2</div>
<div id="content">number3</div>
</div>

而且我已经：

<ul>
<li><div id="ball"></div></li>
<li><div id="ball"></div></li>
<li><div id="ball"></div></li>
</ul>

所以，如果我点击第三个“迷你球”，我将转到div“number3”的位置。

我希望你理解！

Answer 1

你不能给不同的元素提供相同的ID !!

基本上你需要在点击特定按钮时显示特定的部门。有很多方法可以解决这个问题。

所有这些方法都要求你做一件事，检测特定的按钮点击并推断出要显示的div

下面给我看世界上最简单的样本（为了它）..它应该给你一个想法：

各自的html：

<body >
     <ul>
        <li><div id="ball1" data-target="content1">button 1</div></li>
        <li><div id="ball2" data-target="content2">button 2</div></li>
        <li><div id="ball3" data-target="content3">button 3</div></li>
    </ul>   

   <div id="scroller">
        <div id="content1" class="number">number1</div>
        <div id="content2" class="number">number2</div>
        <div id="content3" class="number">number3</div>
    </div>


</body>

各自的jquery代码：

<script type='text/javascript'>

    $(document).ready(function(){

       $('ul').find('li').find('div').click(function(){

             var target = $(this).attr('data-target');
             $('#'+target).slideToggle(1000);

       });

    });
</script>

各自的风格：

<style>
    .number
    {
       display:none;
    }
</style>

根据div的数量创建一系列点按钮

1 个答案: