根據div數量創建一系列點按鈕

我想創建一個按鈕列表，例如一個數字X迷你球，基於數字X的div放入一個容器中。我想這樣的：基於大量的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>

所以，如果我點擊第三個「小球」，我會去格「number3的」的位置。

我希望你明白！

來源

2013-03-03 user12932

http://whathaveyoutried.com/？ – leftclickben 2013-03-03 15:05:01

你不能給同一個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>

來源

2013-03-03 15:13:45

我不明白...所以我有創建一個jquery自動計數divs id內容？怎麼樣？我可以編輯班級號碼嗎？謝謝你的回覆.. – user12932 2013-03-03 15:30:23

沒有。你必須以這種方式創建你的html結構。你必須手動給他們ID。你可以通過靜態類型或通過jquery/javascript動態追加來實現。後來你可以像這樣處理你的html結構。你可以使用jquery在頁面中找到任何元素並相應地處理它 – 2013-03-03 15:33:29

根據div數量創建一系列點按鈕

回答

相關問題