How to become an author
Search
Write a publication
Pull to refresh

Comments 35

Честно говоря не знал о такой простой реализации. Стыдно. Спасибо, будем использовать.
Total votes 3: ↑3 and ↓0+3
UFO just landed and posted this here
Но и не стоит грустить понапрасну, ибо мой сайт-полуторастраничник работает, а он сделан именно так.
This comment wasn’t rated yet0
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?
Оно не столько для маленьких страниц, сколько для маленьких проектов. Браузеры читают стили справа-налево, поэтому, если такое попадает в общий файл…брр.
Total votes 4: ↑2 and ↓20
Вообще-то это прототип показывающий принципы работы, а вы при разработке больших проектов всегда напрямую копипастите в них код из публичных примеров?

Тут проблема встанет в том, что при щелчке на ссылку с якорем страница прокручивается до этого якоря на странице, поэтому без перехвата нажатия на ссылку не обойтись, если якоря не в самом вверху страницы.
Total votes 3: ↑3 and ↓0+3
Вообще-то это прототип показывающий принципы работы, а вы при разработке больших проектов всегда напрямую копипастите в них код из публичных примеров?
Стиль кода и аккуратность важны всегда, если только ты не объясняешь что-то на бумажке в баре.
Total votes 4: ↑4 and ↓0+4
Вай мне!
Я это написал как раз для тех, кто этого не знает и уже пошел копипастить «клевую фишку».
Да и как вы это оптимизируете? Обращение по атрибутам да еще и по маске — крайняя степень скорости работы стилей.
Там айдишники, следовательно, либо на всех страницах соблюдать один нейм-спейс, либо дублировать правила для других айди (указать имена через запятую), либо пользоваться маской, потому что несколько табов на странице станут адом.
Сам принцип не нов и был на хабре.
Total votes 4: ↑3 and ↓1+2
если такое попадает в общий файл…

То ничего страшного не произойдёт. В теории рендер будет медленнее, но на практике, заметно это станет только при огромном количество таких селекторов.
Total votes 2: ↑2 and ↓0+2
UFO just landed and posted this here
На счет последний двух и в самом деле не уверен. Будет ли сначала найден айди, а затем искаться после div[id*=t]:target, буду рад, если кто объяснит мне это.
upd: второй селектор div[id*=tab]:target — без айди.
This comment wasn’t rated yet0
На практике разницу в скорости будет нереально обнаружить. Что бы отловить разницу нужно будет создать тестовый случай с большим и сложным DOM, а также с огромным количеством сложных селекторов.
Кстати, мне не удалось найти примеров таких тестов для более-менее свежих браузеров, единственный который я нашел 2008-го года.
This comment wasn’t rated yet0
Вкладки можно реализовать на чистом CSS с помощью input:checked+div, тогда будет работать даже в ie7. Кроме того, использование :target замусоривает историю переходов браузера, что чаще не нужно.
А вообще статей на хабре уже было предостаточно — раз, два, три.
Total votes 6: ↑5 and ↓1+4
Я свой сайт организовал именно так, в моём случае логично было использовать #portfolio/* для портфолио с соответствующим адресом. Так получилось несколько страниц в одном html файле, без перезагрузки страницы и с загрузкой изображений по необходимости. Это лишь пример, можно использовать для навигации посредственных элементов, те же вкладки в веб-клиенте почты/торрента/настройки и т.д.
Даже сделал пояснение в самом начале поста:
Не будьте буратинами используя это везде подряд.
This comment wasn’t rated yet0
Упс, извиняюсь за дизинформацию, спутал с селектором CSS "+".
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Я лишь предложил ещё один вариант вкладок на «чистом CSS», но которая в отличие от предложенного:
1) не задействует историю
2) позволяет использовать более одной группы вкладок на странице
У каждого подхода есть своя область применения, свои достоинства и недостатки. Лично я, за использование небольшого кусочка JS для назначения классов, чем использовать «чистый CSS», при этом генерируя кучу ненужных элементов. Тот, кто отключил JS будет довольствоваться только одной открытой вкладкой, зато возможностей повышения функционала масса.
This comment wasn’t rated yet0
3) Не занимает атрибут id, который часто требуется заполнить совсем другим.
4) Позволяет выделять активную вкладку, без дублирования их в контенте каждой вкладки.
This comment wasn’t rated yet0
UFO just landed and posted this here
По поводу хардкора автар был прав, страшно представить себе весь проект в таком исполнении. Да, так можно делать, но лучше не стоит (smile)
Total votes 7: ↑0 and ↓7-7
Очень странная идея для времени, когда JavaScript есть везде и нужно ещё с бубном потанцевать что бы его насильственно отключить.
Но как демонстрация возможностей CSS — неплохо.
Total votes 6: ↑4 and ↓2+2
Дело в том что это банально понятнее и проще, чем скриптами. Всему свои инструменты.
Total votes 6: ↑3 and ↓30
Я бы не сказал что понятнее и проще. По мне, проще навесить с помощью 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>
Total votes 5: ↑2 and ↓3-1
Не все проекты используют jQuery. А CSS — все.
Total votes 2: ↑1 and ↓10
Есть отличный фреймворк 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;
}

Но обычно можно подложить килобайт жс кода, который сделает добавку\удаления класса не через такую особую жопу.
This comment wasn’t rated yet0
UFO just landed and posted this here
Ну, во-первых, данные селекторы не все устаревшие браузеры поддерживают, поэтому CSS умеют не все, как вы пишите. Во-вторых, я и не настаиваю на jQuery, можно использовать любой другой фреймворк, можно и как указали выше, написать на чистом js, если на то пошло.
Зато использование JS:
1) избавит от необходимости занимать атрибут id
2) даст возможность расширить функционал, если стандартного будет мало (например, выделять активную вкладку).
Total votes 1: ↑1 and ↓0+1
Мой мозг минуты три парсил магию CSS из статьи. Вы уверены, что быстрее и проще?
Total votes 7: ↑5 and ↓2+3
Можно сделать js скрипт, который будет генерировать такой ксс!
Total votes 2: ↑2 and ↓0+2
Использовать CoffeeScript, компилирующийся в JavaScript, генерирующий такой CSS!
This comment wasn’t rated yet0
<картинка с дикаприо>
Total votes 1: ↑1 and ↓0+1
Я знаю HTML и CSS не так, как хотелось бы, и тут не смог спарсить в голове.

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

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

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

3. Переходим сразу на первую вложенную вкладку третьего блока. Её можно сделать по-умолчанию видимой при видимом #tab, но это пара лишних строк в css, правило не обязательное.
This comment wasn’t rated yet0
UFO just landed and posted this here
Sign up to leave a comment.

Articles

Show the best of all time
Unlock dark mode

Your account

Sections

Information

Services

Support
© 2006–2024, Habr