@thedexploit
Сайтами маюсь

Как сделать два блока содержания таба (tab) в разных местах?

Есть расписание питания на каждый день. Рацион на день + польза от этого рациона.
Дни разделил на обычные табы бутстрапа. Но есть условие, чтобы польза рациона синхронно менялось с днями недели.
Польза дневного рациона находится в другом блоке (под блоком с расписанием)

Открыли понедельник: Справа у нас рацион на день. Чуть ниже по странице - блок пользы рациона на понедельник.
Открываем вторник: Справа рацион на вторник, чуть ниже - уже польза рациона на вторник
И т.д.

Как можно сделать так, чтобы при смене основного таба и менялся контент в блоке с описанием если они в разных частях сайта?

Скрин:
  1. дни недели
  2. Рацион на день
  3. Его польза
4f4748a989bd4e58abc4eba855697cf0.JPG
  • Вопрос задан
  • 479 просмотров
Решения вопроса 1
Банально можно отслеживать переключения по табам, и подменять контент нижнего блока.

Можно, к примеру, вывести сразу пользу для каждого из дней, при этом прописав им display:none и какой-нибудь идентификатор:
<div class='day_1'>Польза рациона понедельника<div>
...
<div class='day_7'>Польза рациона Воскресенья<div>


На табы вешаешь какой-нибудь атрибут, который позволит ссылаться на нижние блоки.
<tab data_day="day_1" >ПН</tab>
 ... 
<tab data_day="day_7" >НД</tab>


$('твои_табы').on('click', function(){
     $('.curentAdvantages').removeClass('curentAdvantages');
     $('.'+$(this).attr('data_day')).addClass('curentAdvantages')
});


.curentAdvantages{
    display:block;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы