Как сделать смену фона родительского блока при смене табов в дочернем блоке?

Question

[Влад Серов]

Есть блок. У него на фоне стоит картинка.
В блоке идет пара строк и дальше 7 табов с информацией.
Нужно что бы при смене табов менялся фон внешнего блока. Как можно организовать?

Answer 1

[Михаил Серенков]

Табы меняются по клику на них ? Повешайте событие onclick на кнопку таба, и в том событии выполняйте смену фона.
Примерно так:

$(".tab-button").click(function() {
    $("#parentBlock").css('background', "#000000");
});

Comments

[tester_toster]

Зачем тут js? Можно и на css сделать.

[Влад Серов]

Да, по клику. Так мне нужно будет добавить 7 фонов (1 активный и 6 открываются по другим табам).

[Михаил Серенков]

Влад Серов: можете скинуть ваш html?

[Михаил Серенков]

Влад Серов: если разные фоны то как-то так:

<div onclick="tabActive('#000000');">Tab name</div>
<div onclick="tabActive('#FF0000');">Tab name 2</div>
<div onclick="tabActive('#FFFF00');">Tab name 3</div>

function tabActive(color) {
    $("#parentBlock").css('background', color);
}

[Влад Серов]

Михаил Серенков: Там вордпрес стоит с премиум темой и конструктором. Поэтому особого доступа к табам нет.

<div class="true-tabs-style-2 tt_animate_none  wOBAgAmB" id="tab2-LPyUumyb">
	<ul class="LPyUumyb true-nav nav-tabs" role="tablist">
		<li class="active"><a href="#pxYnHlJz" role="tab" data-toggle="tab">ПН</a></li>
		<li><a href="#pAiHNiwa" role="tab" data-toggle="tab">ВТ</a></li>
		<li><a href="#kpbTsqnW" role="tab" data-toggle="tab">СР</a></li>
		<li><a href="#jsSFjSUA" role="tab" data-toggle="tab">ЧТ</a></li>
		<li><a href="#PoqRjfMX" role="tab" data-toggle="tab">ПТ</a></li>
		<li><a href="#KrbEOfPq" role="tab" data-toggle="tab">СБ</a></li>
		<li><a href="#TWrOQBhc" role="tab" data-toggle="tab">НД</a></li>
	</ul>
</div>

[Михаил Серенков]

Влад Серов: ну в вордпресе там можно отредактировать чуть тему, чтобы при генерации табов оно в элемент ставило событие onclick, вставлять туда функцию, ...

Answer 2

[tester_toster]

Это css

<ul>
<li>Вкладка 1</li>
<li>Вкладка 2</li>
<li>Вкладка 3</li>
<ul>
<div class="tabs">
<div class="tab"></div>
<div class="tab active"></div>
<div class="tab"></div>
</div>

.tab{
display:none;
}
.tab.active{
display:block;
}

Либо меняйте фон самого tab'а, либо используйте конструкцию и меняйте фон враппера:

.tabs + .tab:nth-child(2).active{
   background-color: red;
}

Вместо nth-child можете использовать отдельный класс для каждой вкладки

Comments

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

Не сработает.

[Михаил Серенков]

Автору нужно менять не фон таба, а фон внешнего блока. Да и к тому же класс .active все равно вы будете ставить с помощью js.