Как я могу отделить эти div в javascript?

Question

У меня есть этот Дива прокрутка скрипт:

$(document).ready(function() { 
$('.tab-box').each(function() { 
    var top = 0; 
    var $tabbox = $(this); 
    var height = $tabbox.height(); 

    $(this).find('.tab').each(function() { 
     var shift = top; 

     $(this).click(function() { 
      $tabbox.find('.items').animate({ 
       marginTop: shift + 'px' 
      }); 
      $tabbox.find('.tab').removeClass('active'); 
      $(this).addClass('active'); 
     }); 

     top -= height; 
    }); 

    $(this).find('.tab:eq(0)').addClass('active'); 
}); 

}); 

Если я правильно понимаю, что получает каждый диву работает только в пределах DIV «вкладка-поле». http://jsfiddle.net/9SfEH/5/

Что я хочу изменить, так это то, что я отделяю «вкладки» от основного div-div tab, но заставляю их по-прежнему управлять «элементами». http://jsfiddle.net/w65Dn/1/

Я пытался создать простое решение buuut не мог придумать один сам. Спасибо всем заранее :)

Answer 1

Проблема заключалась в том, что в исходном коде, это было просматривая вкладки с кликами, используя $(this).find(".tab"), но .tab s больше не были внутри .tab-box. Итак, если вы просто ищете по всему миру, с $(".tab"), он работает.

Обратите внимание, что вы больше не можете иметь более одной вкладки, потому что она ищет глобально для .tab. Вы можете использовать что-то вроде решения javaCity (т. Е. Обернуть все в другом div), чтобы исправить это.

Answer 2

В строке 7, изменить селектор из этого в .tabs

$(this).find('.tab') becomes $(.tabs).find('.tab') 

, как показано здесь: jsfiddle example

Answer 3

Вы искали .tabs внутри tab-box, которого нет. Итак, как насчет создания div вне .tab s, который также включает tab-box?

http://jsfiddle.net/3D8we/

HTML:

<div class="enclosingDiv"> 
    <div class="tabs"> 
     <div class="tab">1</div> 
     <div class="tab">2</div> 
     <div class="tab">3</div> 
    </div> 
    <div class="tab-box"> 
     <div class="items"> 
      <div class="item" style="background: #cbe86b;"></div> 
      <div class="item" style="background: #f2e9e1;"></div> 
      <div class="item" style="background: #1c140d;"> </div> 
     </div> 
    </div> 
</div> 

JS:

$(document).ready(function() { 
    $('.tab-box').each(function() { 
     var top = 0; 
     var $tabbox = $(this); 
     var height = $tabbox.height(); 

     $('.enclosingDiv').find('.tab').each(function() { 
      var shift = top; 

      $(this).click(function() { 
       $tabbox.find('.items').animate({ 
        marginTop: shift + 'px' 
       }); 
       $tabbox.find('.tab').removeClass('active'); 
       $(this).addClass('active'); 
      }); 

      top -= height; 
     }); 

     $(this).find('.tab:eq(0)').addClass('active'); 
    }); 

});