Самый простой способ классифицировать элемент навигации "текущая страница"?
На моей веб-странице есть панель навигации со ссылками на разные страницы. Есть ли простой способ автоматически установить класс в элементе навигации, соответствующем текущей странице? Например, я хочу, чтобы вкладка "О нас" на панели имела другой стиль, если вы в данный момент просматриваете страницу "О нас". Я знаю, что мог бы настроить PHP для каждой страницы, но я бы предпочел более общее решение "установить и забыть".
2 answers
Я использовал это раньше, и это хорошо работает.
Если вам нужно чистое решение HTML/CSS, лучшее, что я могу придумать, - это поместить класс в тело, описывающее, какая вкладка должна быть выделена, и идентификатор на каждой вкладке, а затем нацелить вкладки оттуда через CSS.
Таким образом, для HTML страница "О нас" будет иметь что-то вроде <body class="AboutUs">
, в то время как страница "Главная" будет иметь аналогичное <body class="Home">
. Каждая вкладка будет иметь уникальные идентификаторы, такие как "AboutUs" и "home".
Затем в CSS вы могли бы оформить его так:
body.AboutUs tabs#aboutUs,
body.Home tabs#home
{
/* selection style goes here */
}