CSS3 Tab Control

Question

CSS3 Tab Control

0

Я нашел этот отличный учебник о том, как создать меню с вкладками в HTML только с CSS3: http://www.sitepoint.com/css3-tabs-using-target-selector/

Проблема заключается в том, что на загрузке страницы не отображается ни одна вкладка. В комментариях кто-то говорит, что у него есть решение для этого и даже демонстрирует демо: http://dabblet.com/gist/1892497

Но я все еще не понимаю, как это работает. оо

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

Danmoreng 20 март 2014, в 18:44

Источник

Теги:

html

css3

tabs

1 ответ

Ещё вопросы

David Winiecki · Answer 1 · 2014-03-20T15-54-00.000Z

Я думаю, что ключ заключается в том, что вам нужно иметь ссылку на идентификатор табуляции на вкладке, и вам нужен идентификатор id="tab1" в элементе <section>.

(Снимок экрана с сайта http://blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html)

Затем вы можете связать своих пользователей с yourdomain.com/some-page#tab1 и будет выбрана первая вкладка.

Если вы не хотите #tabX в URL-адресе по эстетическим соображениям, вы можете использовать JavaScript, чтобы добавить выбранный.tab класс на первую вкладку после загрузки страницы.

#tabX в URL-адресе работает вместе с :target селектором CSS для "выбора" вкладки.

(Обратите внимание на разницу между blogs.sitepointstatic.com/examples/tech/css3-target/tabs.html и blogs.sitepointstatic.com/examples/tech/css3-target/… )
Ну, спасибо за объяснение, но, к сожалению, вы меня не так поняли. То, что # tab1 делает вкладку активной, мне уже было ясно, что я тоже могу использовать этот URL. Проблема в том, что я создаю не сайт, а приложение HTA, и поэтому ссылка не будет прежней, поскольку путь к файлу не всегда будет одинаковым. И, как я уже сказал, кто-то уже нашел решение для одной вкладки, выделяющейся при загрузке страницы, без использования прямого URL-адреса, но я не понимал, как он сделал CSS для этого ...
Благодаря вашему комментарию я снова посмотрел на URL. Я уже пытался изменить расположение документа при загрузке с помощью Javascript, но оказалось, что он не работает. Теперь я заметил, что не работала функция window.onload, а не location.href = "# tab1". Понимая, что это работает сейчас! :-)
В примере с шаблоном кажется, что они не используют #tab1 , и это правда, что они по умолчанию выделяют конкретную вкладку при загрузке страницы без использования #tab1 , но они используют ее при переключении вкладок: screencast.com/t/gfvbQzB0jDa ( Кстати, я только что узнал, что вы можете получить консоль в iframe, используя Chrome, что было удобно в этой ситуации: stackoverflow.com/questions/7961229/… )