Че? Я про URL - это главный нативный источник истины и первичное состояние любой веб страницы и веб приложения. Еще немного лирики тут: https://t.me/artalog/157
С ним, конечно, есть пачка проблем: реактивность кривокосая, типизируется плохо и вообще формат (де)сериализации данных не стандартизирован. Но есть то что есть, да и плюсов у него тоже хватает, особенно для пользователя!
Так вот, решаю я тут задачку - показать на лендосе примеры кода, ну в виде табиков. А как переключать их? Можно, конечно, жаваскрипта завести и батонами все сделать, но хотелось бы что-то нативное.
Начинаю переписывать на линки (
<a>) с hash (href=#core-example, href=#routing-example, etc) проставляя соответствующие id контент блокам и злюсь на то что стили-то все равно нужно через ЖС переключать - неполноценная нативка получается. Отписываюсь об этом фундаметнальном упущении в чат вебстандартов, а мне отвечают ссылкой на уже древнее апи! Это же восхитительно: https://developer.mozilla.org/en-US/docs/Web/CSS/:target Работает отлично!
Код на css супер простой: скрываем все по умолчанию, и отдельно показываем только сматченный с урлом табик или первый, если ничего не сматчилось (первое открытие)
.tab {
display: none;
}
.tab:target {
display: block;
}
.tabs:not(:has(:target)) .tab:first-child {
display: block;
}