Выделение активной вкладки - CSS
У меня есть небольшая настройка навигации с вкладками с использованием CSS. При наведении курсора на вкладки цвет меняется, отлично. Однако, когда я нажимаю вкладку, и она переходит на соответствующую страницу, я бы хотел, чтобы эта вкладка (активная вкладка?) Оставалась выделенной, указывая текущую страницу.
В настоящее время я делаю это, используя класс (.currenttab), а затем использую этот класс в каждом файле HTML. Я не использую:
active
Есть ли способ использовать активный, а не использовать класс в каждом отдельном HTML-файле, или то, что я делаю правильно?
Заранее спасибо.
Извините, я не совсем понимаю, о чем вы. В настоящее время у меня есть одна таблица стилей для всего, включая класс .currenttab. Затем в каждом файле HTML я назначаю класс соответствующему элементу списка (элемент навигации). Это неправильно?
Ответы 3
То, что вы делаете, правильно. Псевдоселектор : активный означает что-то еще - событие активации элемента управления (то есть время между нажатием кнопки мыши и ее отпусканием пользователем).
Использование класса для обозначения выбранного элемента - лучший способ.
Спасибо за быстрый ответ.
Это далеко не идеально, но если вы дадите каждой странице и каждой вкладке идентификатор, вы можете определить выделение в css вместо html. Я наткнулся на полное объяснение при поиске активного атрибута:
Выделение текущей страницы с помощью CSS
Сайт, который я разработал с помощью этой техники (страницы, а не вкладки)
не нужно сильно усердствовать с идентификаторами, классов будет достаточно, но этот подход принесет вам наибольшую отдачу от вложенных средств. Когда вы начнете переходить к более продвинутому HTML / CSS, использование добавления классов в тег body будет намного лучше.
Вот еще несколько примеров Brainjar Демо
Больше от Brainjar
Использует ли демо-версия brainjar класс .current в HTML или метод, описанный выше Джастином?
Я думаю, что он использует .active .visited, как это выглядит в исходном коде
Ваш вопрос не совсем ясен, поэтому на всякий случай убедитесь, что вы поместили все классы css в отдельный файл .css, а затем включили его на каждую из своих html-страниц, чтобы вы не переопределяли классы.