1

コンテナーへの div の X 数に基づいて、X 数のミニボールなどのボタンのリストを作成したいと考えています。これ欲しい：

∞ ∞ ∞ ∞</p>

divの数に基づいています。

このボタンにはそれぞれ div (アニメーション スクローラー付き) の位置があり、アイテムの 1 つをクリックすると、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>

3 番目の「ミニボール」をクリックすると、div「number3」の位置に移動します。

ご理解いただければ幸いです。

4

1 に答える 1

0

異なる要素に同じ ID を与えることはできません!!

基本的に、特定のボタンをクリックすると特定の部門を表示する必要があります。これには多くの方法があります。

これらの多くの方法のすべてで、特定のボタンのクリックを検出し、表示される div を推測するという1 つのことを行う必要があります。

以下は、世界で最も単純なサンプルを示しています（念のために）..それはあなたにアイデアを与えるはずです：

それぞれの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>
于 2013-03-03T15:13:45.167 に答える