2

Как сделать эту немного комическую цепочку в заголовке?
Необходимо, чтобы был таб, в котором есть два-три таба, затем в каждом из них еще по табу, в которых есть контент, глубина вложенности, которых не ограничена.

 $('.link').on('click', function(){
  $('.link').removeClass('active'); /* Убрали класс со всех кнопок*/
  $(this).addClass('active'); /* Добавили его на кликнутую кнопку */
  $('.tab').hide(); /* Скрыли все вкладки */
  $('.tab').eq( $(this).index('.link') ).show(); /* Показали нужную */
  /* внутри eq() можно указать номер класса, а нужный номер получается через
  $(this).index('.link') - определяет номер текущего элемента среди классов .link */
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<button class="link">iPhone 5</button>
<button class="link">iPhone 5S</button>
<button class="link active">iPhone 5C</button>
<div class="tab" style="display: none;">
	<button class="link">iPhone 5</button>
	<div class="tab" style="display: none;">
		<button class="link">Попал в воду</button>
		<button class="link">Не работает тачскрин</button>
	</div>
</div>
<div class="tab" style="display: block;">вкладка-2</div>
<div class="tab" style="display: none;">вкладка-3</div>

3
  • Звучит как рекурсия :-) Вы уже попробовали? Что вызвало трудности? 5 ноя 2019 в 16:28
  • @ЕгорБанин тут замысел прост, не совсем рекурсия. Приложил код. Там скрывается родитель, который внутри.
    – Alex
    5 ноя 2019 в 16:31
  • Плагин Jquery tabs не вариант?
    – axmed2004
    5 ноя 2019 в 18:41

1 ответ 1

5

Сделал садистскую разметку, но работает!) В скрипте надо было всего чуть докрутить.

jQuery:

$('.link').on('click', function() {
  $(this).siblings('.link').removeClass('active');
  $(this).addClass('active');

  $(this).siblings('.tab').hide();

  var index = $(this).parent().children('.link').index( $(this) );  
  
  console.clear(); console.log(index);

  $(this).siblings('.tab').eq( index ).show();
});
.tab {
  display: none;
  margin: 10px;
  padding: 10px;
  border: 2px solid orange;
}

.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<div class="mama-tab">
  <button class="link">1</button>
  <button class="link">2</button>
  <button class="link">3</button>

  <div class="tab">
    1
    <button class="link">11</button>
    <button class="link">22</button>
    <button class="link">33</button>

    <div class="tab">
      1-1
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      1-2
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      1-3
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
  </div>

  <div class="tab">
    2
    <button class="link">11</button>
    <button class="link">22</button>
    <button class="link">33</button>

    <div class="tab">
      2-1
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      2-2
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>

    <div class="tab">
      2-3
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
  </div>

  <div class="tab">
    3
    <button class="link">11</button>
    <button class="link">22</button>
    <button class="link">33</button>

    <div class="tab">
      3-1
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      3-2
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      3-3
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
  </div>
</div>

То же самое без jQ:

let link = document.querySelectorAll('.link');

for( let i = 0; i < link.length; i++ ){
  link[i].addEventListener('click', function(){
    let links = children( this.parentNode, "link" );
    let tabs  = children( this.parentNode, "tab" );
    
    let index = links.indexOf( this );
    
    handleClass(links, "remove", "active");
    handleClass(tabs, "remove", "active");
    handleClass([ links[index], tabs[index] ], "add", "active");
  });
}

function handleClass(elems, action, className){
  if( elems instanceof HTMLElement ){
    elems.classList[action]( className );
    return;
  }  
  for( let i = 0; i < elems.length; i++ ){
    elems[i].classList[action]( className );
  }
}

function children(elem, className){
  return Array.from(elem.children).filter( e => e.matches('.' + className) );
}
.tab {
  display: none;
  margin: 10px;
  padding: 10px;
  border: 2px solid orange;
}

.link.active {
  color: red;
}
.tab.active {
  display: block;
}
<div class="mama-tab">
  <button class="link">1</button>
  <button class="link">2</button>
  <button class="link">3</button>

  <div class="tab">
    1
    <button class="link">11</button>
    <button class="link">22</button>
    <button class="link">33</button>

    <div class="tab">
      1-1
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      1-2
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      1-3
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
  </div>

  <div class="tab">
    2
    <button class="link">11</button>
    <button class="link">22</button>
    <button class="link">33</button>

    <div class="tab">
      2-1
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      2-2
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>

    <div class="tab">
      2-3
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
  </div>

  <div class="tab">
    3
    <button class="link">11</button>
    <button class="link">22</button>
    <button class="link">33</button>

    <div class="tab">
      3-1
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      3-2
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
    <div class="tab">
      3-3
      <button class="link">111</button>
      <button class="link">222</button>
      <button class="link">333</button>

      <div class="tab">tab-1111</div>
      <div class="tab">tab-2222</div>
      <div class="tab">tab-3333</div>
    </div>
  </div>
</div>

9
  • 1
    а теперь на чистом js :)) бугагашечка :))))
    – Leks
    5 ноя 2019 в 19:37
  • 1
    @Leks по разному можно извращаться... перевел)) 5 ноя 2019 в 20:06
  • спасибо большое
    – Leks
    5 ноя 2019 в 20:14
  • Спасибо! А можно ли заменить селектор sublingsв первом случае на что-либо другое, чтобы можно было родителей взять в отдельный блок, но схема работала?
    – Alex
    6 ноя 2019 в 7:51
  • 1
    @QuickBrownFox Не представил, чьих родителей и куда, но от любого элемента можно "двигаться" в любом направлении... можно делать цепочки из серии parent().parent().siblings().children() или next().children() — дочерние элементы следующего элемента... prev().children() — дочерние предыдущего и т.п.) 6 ноя 2019 в 8:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.