Вопрос №55685 от пользователя Ольга Халеева в испытании «Вкладки»

Ольга Халеева

Здравствуйте, Никита. Я с некоторой периодичностью возвращаюсь к этому испытанию, но никак не могу его пройти, не понимаю механику. Я сдаюсь. Кнопка "посмотреть решение" не активна, как можно его все же посмотреть? нужно для общего развития :)

11 0

Nikita Mikhaylov

Здравствуйте

А давайте всё же попробуем решить. Поверьте — пройти через всё и решить самостоятельно намного ценнее, чем открыть решение и забыть его через пару дней.

Пришлите своё последнее код-ревью и я попробую ещё направить решение в нужное русло.

1

Ольга Халеева

Ревью https://ru.hexlet.io/code_reviews/408293

Переключение между вкладками работает только при :target при попытке подключения :hover :focus меню начинает "бегать" и не работает. Спасибо.

0

Nikita Mikhaylov

А почему вы решили использовать target? Он немножечко о другом. Он нужен именно при клике и работает только для ссылок. Да, связь обеспечивается, но немного не та.

Давайте отбросим сейчас общую картину и возьмём только вкладку HTML. Как при наведении на элемент с data-tab="html" обратиться к блоку с data-tab-content="html"? Вот посмотрите на свою структуру и прям пошагово опишите. Вспомните, что мы можем делать селекторами, а что нет.

Например, мы не можем обратиться к родителю и даже выйти за его пределы. Следовательно, селекторами мы сейчас никак не можем выйти из блока .tabs-items. Это даёт понять, что надо поменять эту структуру, чтобы ссылки и .tabs-content лежали на одном уровне. В таком случае мы станем на шаг ближе к решению.

0

Ольга Халеева

Никита, ну никак не удается выполнить это задание. Я уже попыталась закрепить шапку вкладок, но они по-прежнему пытаются прыгать и работают некорректно.

Ревью - https://ru.hexlet.io/code_reviews/408293

Ну дайте доступ к решению...

0

Nikita Mikhaylov

А почему вы пошли в сторону grid, если к этому моменту мы его ещё не изучали? И почему вы не можете увидеть решение?

0

Nikita Mikhaylov

Я бы посоветовал спокойно, используя те навыки, которые изучены к этому уроку сделать аккуратно с нуля. Сейчас есть некоторые моменты с селекторами, в которых есть небольшие ошибки. Например,

[data-tab]:focus,:hover + div

С точки зрения CSS этот селектор обозначает:

  • Выбрать элементы с data-tab на которых есть событие фокуса. Всё
  • Выбрать соседние div рядом с элементом ? с событием hover. То есть браузер здесь не очень понимает, что от него хотят. Логически вы хотите построить такой селектор
[data-tab]:focus + div, [data-tab]:hover + div {
  // Что-то
}

Но немного запутались в записи самого селектора

1

Ольга Халеева

Nikita Mikhaylov,

А почему вы пошли в сторону grid, если к этому моменту мы его ещё не изучали? И почему вы не можете увидеть решение?

Потому что за то время, что я пытаюсь сделать это испытание я прошла последующие курсы данного направления.

Увидеть решение не могу потому что кнопка "Показать решение" не активна. "Решение учителя Просмотр содержимого доступен только после прохождения соответствующего задания".

0

Ольга Халеева

Nikita Mikhaylov, селектор поправила. Визуально работает очень похоже на эталон. Но тесты не все проходит:

Ревью - https://ru.hexlet.io/code_reviews/408293

PS Раз пять перечитала темы про селекторы и псевдоклассы, но информации, на мой взгляд, все же недостаточно в этих уроках. Если начинаешь с нуля, то основной затык как раз в этих темах идет и 57% решения этого испытания - индикатор.

0

Nikita Mikhaylov

Визуально работает очень похоже на эталон

Тесты (неважно, это тесты для JS, PHP, Python, HTML/CSS) достаточно противны к таким вещам. Действительно может быть очень похожи, но это роботы и с ними особо не поспоришь. Дело в том, что сейчас, при реальной высоте таба (ссылки на него) в 70 пикселей вы задали высоту колонки 30 пикселей. Думаю именно с этим связаны ошибки и, поэтому, я обратил внимание на то, что мы не проходили Grid к этому моменту. Здесь они скорее дополнительную сложность привнесли.

После этого ещё посмотрите на отступы внутри табов. Думаю, что именно из-за того, что я написал выше и получилось такое значение, которое подобралось на глаз.

И, в конце, поработайте немного со шрифтами. Весь основной текст у вас тоже использует насыщенное начертание.

Всё это должно помочь пройти испытание

0

Ольга Халеева

Nikita Mikhaylov, спасибо за развернутые ответы. Дело в том, что проходит четыре теста из пяти. Не проходит ndex-test-js-tabs-template-template-with-a-viewport-of-1440-px-hover-css-tab-1-snap.png, различие в том, что тест отображает, будто при ховере на "CSS" вкладка не раскрывается совсем. Хотя в браузере вкладка при наведении работает.

Все, прошло. Спасибо! Я правильно понимаю, что область наведения (чувствительная для курсора) при разной высоте таба разная получается?

0

Nikita Mikhaylov

Все, прошло. Спасибо! Я правильно понимаю, что область наведения (чувствительная для курсора) при разной высоте таба разная получается?

Да, именно так. Получается, что если сама высота элемента меньше, то сокращается и область взаимодействия. А иногда она может и не очень корректно просто работать. Поэтому всегда стоит следить за тем, чтобы высота элемента в HTML соответствовала тому, что есть на самом деле

Поздравляю с выполнением!

0

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
25 мая 10 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
25 мая 10 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
25 мая 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Новый
Разработка фронтенд и бэкенд компонентов веб-приложений
25 мая 16 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
25 мая 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Создает веб-приложения со скоростью света
25 мая 5 месяцев