Подсветка активной панели в CSS без JavaScript

Question

Я строю что-то похожее на это - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html

Я задавался вопросом, есть ли у кого-нибудь идеи о том, как отобразить текущую панель в навигации БЕЗ JavaScript - чистый CSS.

Я довольно доверенный, это невозможно, но я все равно решил спросить.

Просто чтобы уточнить ...
Вы заметите, что когда вы нажимаете на ссылку на этой странице - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html ссылка, на которую вы только что нажали, выделяет , чтобы сообщить пользователю, на какую панель он смотрит. Это то, что я хочу сделать в CSS.

Answer 1

Возможно, хотите верьте, хотите нет, но это действительно сложно. Это должно помочь вам начать: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ Бит ключа фиксируется в этой цитате:

Я уверен, что вы все знаете о связи с элементом на одной странице с использованием атрибута ID и о том, как он работает. Однако вы, возможно, не знали, что ссылка на элемент, который скрыт за страницей, приводит к тому, что элемент «перетягивается» в поле зрения, а не окно, спрыгивающее к этому элементу.

Так что, по сути, вы бы поместили все свои слайды за пределы страницы, а затем чтобы пронумерованные ссылки использовали привязки, чтобы вывести их на экран. Ваш вариант использования должен быть немного проще, чем тот, который она использует, поскольку вам не нужно затемнять остальную часть страницы.

Answer 2

То, что вам нужно сделать, это поместить то, что вам нужно, чтобы скользить внутри контейнера с фиксированным размером и свойством «переполнения», установленным как скрытое. Затем, внутри этого контейнера, вы помещаете свое «скользящее» содержимое в список элементов привязки с «display», установленным, чтобы блокировать и изменять размер контейнера. Если по ссылке на странице вы вызовете один из якорей в списке, автоматически появится элемент с соответствующим именем якоря. все просто.