Hello!
Tell me how to tie one tab block to another tab block, i.e. When changing in the upper block of tabs, does a change occur in the lower block of tabs?

In which direction to move?
One block of tabs to another block of tabs:

http://szsi.com.ua/page/test/

Here is an example:
When you select in the top tab, the corresponding tab should open at the bottom:
top bronze - bottom bronze, etc.

Thank you in advance!

    1 answer 1

    html:

    <form id="slider" data-min="1" data-max="3"> <div class="tab_img"> <span class="prev" data-type="3" onclick="ChangeType($(this).data('type'));">назад</span> <img class="img" src="type_1.png" height="50" width = "50"/> <span class="next" data-type="2" onclick="ChangeType($(this).data('type'));">вперёд</span> </div> <div class="tabs_info"> <div class="type_1 select" data-type="1" onclick="ChangeType($(this).data('type'));">type_1</div> <div class="type_2" data-type="2" onclick="ChangeType($(this).data('type'));">type_2</div> <div class="type_3" data-type="3" onclick="ChangeType($(this).data('type'));">type_3</div> </div> <input type="hidden" name="type" value="1"/> <input type="submit" value="Подробнее"/> </form>

    js (jquery):

     ChangeType = function(numb) { $('.img').attr('src', 'type_'+numb.toString()); $('.tabs_info').children().removeClass('select'); $('.type_'+numb.toString()).addClass('select'); $('input[name="type"]').val(numb); var sl_max = $('#slider').data('max'), sl_min = $('#slider').data('min'); if($('.prev').data('type')==sl_min) { $('.prev').data('type',sl_max); } else { $('.prev').data('type',($('.prev').data('type')-1)) } if($('.next').data('type')==sl_max) { $('.next').data('type',sl_min); } else { $('.next').data('type',($('.next').data('type')+1)) } }

    here