Вопрос №55685 от пользователя Ольга Халеева в испытании «Вкладки»
Здравствуйте, Никита. Я с некоторой периодичностью возвращаюсь к этому испытанию, но никак не могу его пройти, не понимаю механику. Я сдаюсь. Кнопка "посмотреть решение" не активна, как можно его все же посмотреть? нужно для общего развития :)
Здравствуйте
А давайте всё же попробуем решить. Поверьте — пройти через всё и решить самостоятельно намного ценнее, чем открыть решение и забыть его через пару дней.
Пришлите своё последнее код-ревью и я попробую ещё направить решение в нужное русло.
Ревью https://ru.hexlet.io/code_reviews/408293
Переключение между вкладками работает только при :target при попытке подключения :hover :focus меню начинает "бегать" и не работает. Спасибо.
А почему вы решили использовать target? Он немножечко о другом. Он нужен именно при клике и работает только для ссылок. Да, связь обеспечивается, но немного не та.
Давайте отбросим сейчас общую картину и возьмём только вкладку HTML. Как при наведении на элемент с data-tab="html" обратиться к блоку с data-tab-content="html"? Вот посмотрите на свою структуру и прям пошагово опишите. Вспомните, что мы можем делать селекторами, а что нет.
Например, мы не можем обратиться к родителю и даже выйти за его пределы. Следовательно, селекторами мы сейчас никак не можем выйти из блока .tabs-items. Это даёт понять, что надо поменять эту структуру, чтобы ссылки и .tabs-content лежали на одном уровне. В таком случае мы станем на шаг ближе к решению.
Никита, ну никак не удается выполнить это задание. Я уже попыталась закрепить шапку вкладок, но они по-прежнему пытаются прыгать и работают некорректно.
Ревью - https://ru.hexlet.io/code_reviews/408293
Ну дайте доступ к решению...
А почему вы пошли в сторону grid, если к этому моменту мы его ещё не изучали? И почему вы не можете увидеть решение?
Я бы посоветовал спокойно, используя те навыки, которые изучены к этому уроку сделать аккуратно с нуля. Сейчас есть некоторые моменты с селекторами, в которых есть небольшие ошибки. Например,
[data-tab]:focus,:hover + div
С точки зрения CSS этот селектор обозначает:
- Выбрать элементы с
data-tabна которых есть событие фокуса. Всё - Выбрать соседние div рядом с элементом ? с событием hover. То есть браузер здесь не очень понимает, что от него хотят. Логически вы хотите построить такой селектор
[data-tab]:focus + div, [data-tab]:hover + div {
// Что-то
}
Но немного запутались в записи самого селектора
Nikita Mikhaylov,
А почему вы пошли в сторону grid, если к этому моменту мы его ещё не изучали? И почему вы не можете увидеть решение?
Потому что за то время, что я пытаюсь сделать это испытание я прошла последующие курсы данного направления.
Увидеть решение не могу потому что кнопка "Показать решение" не активна. "Решение учителя Просмотр содержимого доступен только после прохождения соответствующего задания".
Nikita Mikhaylov, селектор поправила. Визуально работает очень похоже на эталон. Но тесты не все проходит:
Ревью - https://ru.hexlet.io/code_reviews/408293
PS Раз пять перечитала темы про селекторы и псевдоклассы, но информации, на мой взгляд, все же недостаточно в этих уроках. Если начинаешь с нуля, то основной затык как раз в этих темах идет и 57% решения этого испытания - индикатор.
Визуально работает очень похоже на эталон
Тесты (неважно, это тесты для JS, PHP, Python, HTML/CSS) достаточно противны к таким вещам. Действительно может быть очень похожи, но это роботы и с ними особо не поспоришь. Дело в том, что сейчас, при реальной высоте таба (ссылки на него) в 70 пикселей вы задали высоту колонки 30 пикселей. Думаю именно с этим связаны ошибки и, поэтому, я обратил внимание на то, что мы не проходили Grid к этому моменту. Здесь они скорее дополнительную сложность привнесли.
После этого ещё посмотрите на отступы внутри табов. Думаю, что именно из-за того, что я написал выше и получилось такое значение, которое подобралось на глаз.
И, в конце, поработайте немного со шрифтами. Весь основной текст у вас тоже использует насыщенное начертание.
Всё это должно помочь пройти испытание
Nikita Mikhaylov, спасибо за развернутые ответы. Дело в том, что проходит четыре теста из пяти. Не проходит ndex-test-js-tabs-template-template-with-a-viewport-of-1440-px-hover-css-tab-1-snap.png, различие в том, что тест отображает, будто при ховере на "CSS" вкладка не раскрывается совсем. Хотя в браузере вкладка при наведении работает.
Все, прошло. Спасибо! Я правильно понимаю, что область наведения (чувствительная для курсора) при разной высоте таба разная получается?
Все, прошло. Спасибо! Я правильно понимаю, что область наведения (чувствительная для курсора) при разной высоте таба разная получается?
Да, именно так. Получается, что если сама высота элемента меньше, то сокращается и область взаимодействия. А иногда она может и не очень корректно просто работать. Поэтому всегда стоит следить за тем, чтобы высота элемента в HTML соответствовала тому, что есть на самом деле
Поздравляю с выполнением!
Используйте Хекслет по-максимуму!
- Задавайте вопросы по уроку
- Проверяйте знания в квизах
- Проходите практику прямо в браузере
- Отслеживайте свой прогресс
Зарегистрируйтесь или войдите в свой аккаунт