Три шапки на сайте, как выводить нужную в зависимости от класса в body?

Question

[Сергей Горячев]

Есть у меня странная верстка, но надо сделать)
Есть сайт, у него совершенно 3 разные шапки, 3 цветовых оформления.
Пойдя наибольшим методом сопротивления, решил связать цвета с классом в body.
Если , то цвета на сайте красные. Если yellow, то, соответственно, желтые.
Теперь еще проблема с шапкой.
В зависимости от класса, меняется шапка, полностью. Не просто перестройка элементов.
Хочу сделать через jQuery, но пока не понял, как подойти лучше)))

Comments

[Yustas Alexu]

При каком условии должна меняться шапка? Пользователь что-то должен сделать для этого?

[Сергей Горячев]

Yustas Alexu: Вообще нет, при загрузке.

Answer 1

[Максим Тимофеев]

допустим у body 3 класса может быть
red, green, blue
есть три шапки

<div class='visible-red'></div>
<div class='visible-green'></div>
<div class='visible-blue'></div>

и css:

.visible-red, .visible-green, .visible-blue {display:none;}
.red .visible-red {display:block;}
.green .visible-green {display:block;}
.blue .visible-blue {display:block;}

Comments

[Сергей Горячев]

Блин, точно же. Усложнить хотел жизнь себе...

Answer 2

[iBird Rose]

раз шапка прям разная - не легче сделать 3 блока шапки. задать двум display:none; а одной block; и в зависимости от класса в body скрывать 2 других и показывать нужный?

Comments

[Сергей Горячев]

Вот я и думаю, как будет лучше. Да, прям разные, разные.

[iBird Rose]

Sergey Goryachev: ну делай через display: none и block кароч. то что у тебя в html будет сразу 3 шапки грузиться хуже не будет. через js аппендить - нагрузка как по мне будет больше

Answer 3

[Андрей Федоров]

А зачем тут jq? codepen.io/aliencash/pen/NdZBZz
Меняйте классы у body, будет меняться блок используемый как шапка.

Comments

[Сергей Горячев]

Да, перемудрил) Спасибо)