Javascript-форум - Навигация с помощью закладок. Нахождение компромисса или решения.

Javascript-форум (https://javascript.ru/forum/)

- (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)

- - Навигация с помощью закладок. Нахождение компромисса или решения. (https://javascript.ru/forum/xhtml-html-css/49999-navigaciya-s-pomoshhyu-zakladok-nakhozhdenie-kompromissa-ili-resheniya.html)

Навигация с помощью закладок. Нахождение компромисса или решения.

Вот мой пример: http://jsfiddle.net/dkf42wk7/3/

Идея в том, чтобы при чеканьи импута показывать контент.
Источник: http://www.sitehere.ru/animirovannye...a-css3-i-html5
Тильда "~" в это вопросе не помогает.(
И насколько я знаю родительского селектора у нас нет.
Подскажите, пожалуйста, падавану - как обойти красиво этот способ?
Хотелось бы сохранить семантику разделения табов и контента.

Для примера можете проследить как будет появляться контент добавив первому section такой стиль:

Код:

 -webkit-transform: translateX(0px);

    -moz-transform: translateX(0px);

    -o-transform: translateX(0px);

    -ms-transform: translateX(0px);

    transform: translateX(0px);

    z-index: 100;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    opacity: 1;

    -webkit-transition: all ease-out 0.2s 0.1s;

    -moz-transition: all ease-out 0.2s 0.1s;

    -o-transition: all ease-out 0.2s 0.1s;

    -ms-transition: all ease-out 0.2s 0.1s;

    transition: all ease-out 0.2s 0.1s;

Спасибо заранее!!

Цитата:

Хотелось бы сохранить семантику разделения табов и контента.

Простите а какой вы считаете правильной семантикой табов
Без Js будет не кроссброузерно
Табы css, спойлер css
Табы javascript, табы jQuery

Решение нашел.

Цитата:

Сообщение от iis_ (Сообщение 329408)

Решение нашел.

Так покажи. Может другим то-же поможет пример

Цитата:

Сообщение от Poznakomlus (Сообщение 329412)

Так покажи. Может другим то-же поможет пример

http://jsfiddle.net/k7adwo8m/1/

Спасибо за стремление помочь!:)