Переопределение стилей родительского и родственного элементов

@Цитадель · Регистрация: 26.07.2017

Author24 — интернет-сервис помощи студентам

Есть такая структура:

HTML5

<div id="content">
<div class="left-block">
<ul class="output">
<li class="about" style="display: none;">...</li>
<li class="gallery" style="display: none;">...</li>
<li class="configurator" style="display: list-item;">
<iframe height="530px" width="670px" src="https://..."></iframe>
</li>
</ul>
</div>
<div class="right-block">
<ul class="tabs">
<li class="featureList tab-about">...</li>
<li class="featureList tab-gallery">...</li>
<li class="featureList tab-configurator current">
<a href="#configurator" onclick="return false">Конфигуратор</a></li>
</ul>
</div>
</div>

Нужно переопределять стили элементов <div id="content">, <div class="left-block"> и <div class="right-block"> тогда, когда содержимое элемента <li class="configurator" style="display: list-item;"> видимо.
Я вижу два варианта:
1. Проверить на наличие в dom-дереве элемента <li class="featureList tab-configurator current"> с помощью

Javascript

1	$("li").is(".featureList configurator current")

и если есть, то переопределять стили.
2. Переопределять стили при клике на ссылку <a href="#configurator">.

После того, как пользователь кликает на другие ссылки из списка, например, gallery или about, стили должны возвращаться обратно.

Вопрос в том, какой из этих вариантов оптимальный или есть какие-то другие решения?

Добавлено через 57 минут
Оказывается, на jQuery можно проверить видимость элемента. Пока получается так:

Javascript

if ($("li.output.configurator").is(":visible"))
{
    content.style.width="1300px";
    left-block.style.width="1038px";
    right-block.style.cssText="float: right; \
    width: 262px;"
}
else {
    ;
}

Помогите пожалуйста, какие тут есть ошибки?

Добавлено через 2 часа 47 минут
Очень нуждаюсь в любой подсказке, векторе, куда копать

@Цитадель · 22.03.2018, 18:36 **[ТС]**

Вот визуально, что нужно...

@Уф · 23.03.2018, 10:23

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

@Цитадель · 23.03.2018, 11:58 **[ТС]**

В правом список выбора, когда щелкаешь по пунктам меню в левом блоке меняется содержимое.
При нажатии на пункт galery слева отображаются фотки, при нажатии на configurator - фрейм. И вот при выборе пункта configurator необходимо менять размеры и позиционирование общего (content), левого и правого блоков, а при нажатии на другие пункты списка возвращать стили обратно

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

@Уф · 23.03.2018, 12:05

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

@Цитадель 0 / 0 / 0 Регистрация: 26.07.2017 Сообщений: 37
	22.03.2018, 18:36 [ТС]	2
	Вот визуально, что нужно... Миниатюры 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	23.03.2018, 10:23	3
	не ясна сама логика работы твоих блоков, в левом у тебя фрейм, а в правом у тебя список выбора? и когда щелкаешь по спискам что должно происходить? 1

@Цитадель 0 / 0 / 0 Регистрация: 26.07.2017 Сообщений: 37
	23.03.2018, 11:58 [ТС]	4
	В правом список выбора, когда щелкаешь по пунктам меню в левом блоке меняется содержимое. При нажатии на пункт galery слева отображаются фотки, при нажатии на configurator - фрейм. И вот при выборе пункта configurator необходимо менять размеры и позиционирование общего (content), левого и правого блоков, а при нажатии на другие пункты списка возвращать стили обратно Добавлено через 25 минут Думается, легче и очевиднее всего повесить на нужный пункт списка событие, при котором будут меняться классы у нужных мне элементов 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	23.03.2018, 12:05	5
	Сообщение было отмечено Цитадель как решение Решение а зачем переопределять стили если ты можешь сразу написать правильные у каждого блока, когда их не видно не все равно ли какие там стили? И зачем их в списке держать, если можно просто в дивах? 1

Переопределение стилей родительского и родственного элементов

Решение