Вкладки (страницы) на одной странице на html/css с помощью :target

[SolovyevMax]

Честно говоря не знал о такой простой реализации. Стыдно. Спасибо, будем использовать.

[alltiptop]

Но и не стоит грустить понапрасну, ибо мой сайт-полуторастраничник работает, а он сделан именно так.

[magic4x]

div:target {
  display: block;
}
div[id*=tab]:target {
  display: block;
}
div[id*=tab]:target ~ #three {
  display: block;
}
div[id*=t]:target ~ #one {
  display: none;
}

Слоу-мо-css?
Оно не столько для маленьких страниц, сколько для маленьких проектов. Браузеры читают стили справа-налево, поэтому, если такое попадает в общий файл…брр.

[dshster]

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

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

[GruZZ]

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

Стиль кода и аккуратность важны всегда, если только ты не объясняешь что-то на бумажке в баре.

[magic4x]

Вай мне!
Я это написал как раз для тех, кто этого не знает и уже пошел копипастить «клевую фишку».
Да и как вы это оптимизируете? Обращение по атрибутам да еще и по маске — крайняя степень скорости работы стилей.
Там айдишники, следовательно, либо на всех страницах соблюдать один нейм-спейс, либо дублировать правила для других айди (указать имена через запятую), либо пользоваться маской, потому что несколько табов на странице станут адом.
Сам принцип не нов и был на хабре.

[ImKremen]

если такое попадает в общий файл…

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

[magic4x]

На счет последний двух и в самом деле не уверен. Будет ли сначала найден айди, а затем искаться после div[id*=t]:target, буду рад, если кто объяснит мне это.
upd: второй селектор div[id*=tab]:target — без айди.

[ImKremen]

На практике разницу в скорости будет нереально обнаружить. Что бы отловить разницу нужно будет создать тестовый случай с большим и сложным DOM, а также с огромным количеством сложных селекторов.
Кстати, мне не удалось найти примеров таких тестов для более-менее свежих браузеров, единственный который я нашел 2008-го года.

[PaulZi]

Вкладки можно реализовать на чистом CSS с помощью input:checked+div, тогда будет работать даже в ie7. Кроме того, использование :target замусоривает историю переходов браузера, что чаще не нужно.
А вообще статей на хабре уже было предостаточно — раз, два, три.

[alltiptop]

Я свой сайт организовал именно так, в моём случае логично было использовать #portfolio/* для портфолио с соответствующим адресом. Так получилось несколько страниц в одном html файле, без перезагрузки страницы и с загрузкой изображений по необходимости. Это лишь пример, можно использовать для навигации посредственных элементов, те же вкладки в веб-клиенте почты/торрента/настройки и т.д.
Даже сделал пояснение в самом начале поста:

Не будьте буратинами используя это везде подряд.

[GruZZ]

Вкладки можно реализовать на чистом CSS с помощью input:checked+div, тогда будет работать даже в ie7.

Не будет, оба IE9+:

• htmlbook.ru/css/checked
• htmlbook.ru/css/target

[PaulZi]

Упс, извиняюсь за дизинформацию, спутал с селектором CSS "+".

[PaulZi]

Я лишь предложил ещё один вариант вкладок на «чистом CSS», но которая в отличие от предложенного:
1) не задействует историю
2) позволяет использовать более одной группы вкладок на странице
У каждого подхода есть своя область применения, свои достоинства и недостатки. Лично я, за использование небольшого кусочка JS для назначения классов, чем использовать «чистый CSS», при этом генерируя кучу ненужных элементов. Тот, кто отключил JS будет довольствоваться только одной открытой вкладкой, зато возможностей повышения функционала масса.

[PaulZi]

3) Не занимает атрибут id, который часто требуется заполнить совсем другим.
4) Позволяет выделять активную вкладку, без дублирования их в контенте каждой вкладки.

[IhorL]

По поводу хардкора автар был прав, страшно представить себе весь проект в таком исполнении. Да, так можно делать, но лучше не стоит (smile)

[Quiz]

Очень странная идея для времени, когда JavaScript есть везде и нужно ещё с бубном потанцевать что бы его насильственно отключить.
Но как демонстрация возможностей CSS — неплохо.

[alltiptop]

Дело в том что это банально понятнее и проще, чем скриптами. Всему свои инструменты.

[PaulZi]

Я бы не сказал что понятнее и проще. По мне, проще навесить с помощью jQuery:

$('.tab').click(function(){ $('.tab').removeClass('tab-open'); $($(this).attr('href')).addClass('tab-open'); });

.tab { display: none; }
.tab-open { display: block; }

<a href="#tab-1">tab 1</a><a href="#tab-2">tab 2</a>
<div id="tab-1" class="tab"></div>
<div id="tab-1" class="tab"></div>

[bubuq]

Не все проекты используют jQuery. А CSS — все.

[Zibx]

Есть отличный фреймворк vanilla.js. Сейчас его из коробки все браузеры поддерживают.

var tabs = document.querySelector( '.tab' ),
    clickFn = function( e ){ 
        tabs.forEach( function( el ){ el.className.replace( /^tab-open\s?|\s?tab-open$|\s?tab-open/g, '' ); });
        this.className = this.className.split( ' ' ).concat( 'tab-open' ).join( ' ' );
        e.preventDefault();
    }; 
tabs.forEach( function( tab ){
    tab.onclick = clickFn;
}

Но обычно можно подложить килобайт жс кода, который сделает добавку\удаления класса не через такую особую жопу.

[PaulZi]

Ну, во-первых, данные селекторы не все устаревшие браузеры поддерживают, поэтому CSS умеют не все, как вы пишите. Во-вторых, я и не настаиваю на jQuery, можно использовать любой другой фреймворк, можно и как указали выше, написать на чистом js, если на то пошло.
Зато использование JS:
1) избавит от необходимости занимать атрибут id
2) даст возможность расширить функционал, если стандартного будет мало (например, выделять активную вкладку).

[Quiz]

Мой мозг минуты три парсил магию CSS из статьи. Вы уверены, что быстрее и проще?

[Zibx]

Можно сделать js скрипт, который будет генерировать такой ксс!

[Quiz]

Использовать CoffeeScript, компилирующийся в JavaScript, генерирующий такой CSS!

[isden]

<картинка с дикаприо>

[relgames]

Я знаю HTML и CSS не так, как хотелось бы, и тут не смог спарсить в голове.

Смотрел на пример на codepen, не могу понять — почему у вас есть дивы one, two, three и tab1, tab2, tab3?
Почему третий таб у вас состоит из двух дивов (id=tab1 и id=three)?
Что такое /one и почему <a href="#tab/one">#three</a>? Третий таб — это на самом деле первый?

Извините за глупые вопросы.

[alltiptop]

1. Дивы #one, #two и #three (заменил на #tab для логичности, по совету одного из товарищей) означают вкладки «верхнего» уровня, #tab/one, #tab/one, #tab/one — вкладки в третьей вкладке, то есть то же самое, но в одном из блоков, для многоуровневого деления.

2. #tab — блок, видимый при просмотре всех «вложенных» в него вкладок #tab/* (которые отдельно), для общих элементов при всех #tab/. На примере это светлый фон, мелкий текст и ссылки 3.1, 3.2 и 3.3.

3. Переходим сразу на первую вложенную вкладку третьего блока. Её можно сделать по-умолчанию видимой при видимом #tab, но это пара лишних строк в css, правило не обязательное.

[RinNas]

jsfiddle.net/hf759a2x/5/ — простой и изящный способ, IE9+