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

Question

[Влад Серов]

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

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

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

Скрин:

1. дни недели
   
2. Рацион на день
   
3. Его польза
   

Answer 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;
}

Comments

[Влад Серов]

Попробовал. Не запустилось. Блокам с рационами задал display:none, а в коде в качестве "своих табов" поставил 'a[data-toggle="tab"]'

[Дмитрий Гординский]

Влад Серов: Плохо пробовали. Я предложил рабочий, хоть и костыльный, способ.
И что значит не запустилось?

[Влад Серов]

Дмитрий Гординский: Согласен что плохо пробовал. Я взял свои табы. Добавил в нужном месте блок с контентом и вставил в коде вместо записи 'твои табы' написанное выше. Прописал в css класс. К табам добавил data_day="day_7" (по порядку), а к блоку пользы добавил идентичный класс и класс с "дисплеем нон". JS код в шапке лучше прописать или в подвале?

[Дмитрий Гординский]

Влад Серов: Лучше в подвал.
Проверьте, может событие и вовсе не срабатывает.
$('твои_табы').on('click', function(){
alert( $(this).attr('data_day') );
$('.curentAdvantages').removeClass('curentAdvantages');
$('.'+$(this).attr('data_day')).addClass('curentAdvantages');
});

[Влад Серов]

Дмитрий Гординский: действительно, не срабатывает. Буду икать причину

[Влад Серов]

Дмитрий Гординский: Все работает. Еще вопрос - как сделать первое содержание видимым, а то оно открывается только после клика по табу "ПН"? Спасибо большое за помощь!