Измените, какой тег a подсвечивается в зависимости от активной страницы

ProgramBox

Измените, какой тег a подсвечивается в зависимости от активной страницы

Post author:admin
Запись опубликована:5 января, 2022
Post category:Вопросы по программированию

#javascript #php #html #css

Вопрос:

Поэтому у меня есть меню с разными пунктами

 lt;div class="right-nav"gt;  lt;a href="/metrics/website/index" class="active"gt;Homelt;/agt;  lt;a href="/metrics/website/pages/archives"gt;Archiveslt;/agt; lt;/divgt;

class="active" Выделяет пункт меню, и мне было интересно, как я мог бы изменить этот класс в зависимости от того, на какой странице я был. Так что , если пользователь посетил Archives , значит, так оно и есть class="active" .

Класс-это просто простой цвет

 .topnav a.active {  /* When a-tags inside this class has been clicked - do highlight*/  color: var(--selected-nav-page); }

Весь мой html-код запускается внутри php-файлов.

Обновить

Возможно, я нашел что-то, что работает, используя php, что вы, ребята, думаете?

Создал php скрипт, который проверяет, на какой странице я нахожусь, и пишет активно или нет в моих a-тегах.

 lt;?php  function active($currect_page){  $url = str_replace(".php", "", basename($_SERVER['PHP_SELF'])); //name without .php  if($currect_page == $url){  echo 'active'; //class name in css  }  } ?gt;  lt;div class="right-nav"gt;  lt;a href="#index" class="lt;?php active('index'); ?gt; active"gt;Homelt;/agt;  lt;a href="#archives" class="lt;?php active('archives'); ?gt;"gt;Archiveslt;/agt; lt;/divgt;

1. Вы не можете сделать это только с помощью HTML и CSS. Вам нужен код для запуска в клиенте (например, JavaScript) или на бэкэнде (например, PHP, ASP.NET, JavaScript [через узел или Deno или что-то еще] и т. Д.).

2. Я запускаю это на php, добавлю тег

3. Что вы до сих пор пытались решить эту проблему? Что-нибудь не работает с данным подходом?

Ответ №1:

Если я правильно вас понимаю, у вас есть две отдельные страницы, одна под названием «Архив», а другая «Главная». Вы хотите иметь возможность выделить название страницы, которая в данный момент открыта.

Я бы предложил, чтобы, поскольку у вас есть две страницы в двух документах, вы могли переместить класс в другой вариант на сайте, который вы хотите, чтобы он отображался как таковой.

 lt;DOCTYPE HTMLgt;  lt;headgt;  lt;stylegt;  .topnav a.active {  color: (colour you pick);  }  lt;/stylegt;  lt;/headgt;  lt;bodygt;  lt;div class="right-nav"gt;  lt;a href="/metrics/website/index" class="active"gt;Homelt;/agt;  lt;a href="/metrics/website/pages/archives"gt;Archiveslt;/agt;  lt;/divgt;  lt;/bodygt; lt;/htmlgt;

1. Я создал UPDATE , вы можете посмотреть на это. У меня есть только один файл с пунктами меню, и они перенаправляются на разные страницы. Вот почему мне нужно выполнить активный класс в одном файле и переключиться между выбранными один раз.

Ответ №2:

Вы можете изменить класс следующим образом:

 document.getElementById("lt;arcive_idgt;").class = "active";

1. Мне понадобится какой-то прослушиватель a-тегов и проверка, добавлен ли класс или нет?

2. Нет, как только вы захотите изменить этот класс, вам нужно будет использовать это, когда? это ваш выбор, я думаю, что это произойдет, как только будет выбрана новая страница.

3. Но мне все равно нужно будет удалить класс из старого «активного» класса.

4. Еще вы можете показать рабочий пример по этому поводу?

5. Для того, чтобы удалить, вы можете сделать: document.getElementById(«lt;идентификатор домаgt;»).class = » для пустой строки

Ответ №3:

Вы не можете сделать это с помощью чистого CSS. Вам придется изменить HTML-код страниц. Поскольку мы не знаем, используете ли вы что-то вроде PHP или CMS в целом, единственным способом в обычном HTML/CSS было бы добавление классов вручную или написание некоторого JavaScript, который добавляет классы динамически. Хотя я бы не рекомендовал этого делать.

Ответ №4:

Поскольку я не использую .php его на своих страницах, я удаляю эту часть из имени файла. Кроме того, я использую базовое имя PHP_SELF, чтобы получить имя текущего файла. Если это равно имени в функции меню, то напишите активно. Единственная проблема здесь заключалась бы в том, если бы у меня было два файла с одинаковыми именами в разных каталогах, и я добавил бы их в меню. Потому что тогда оба будут выделены, поэтому я добавил basename(getcwd()) , чтобы получить родительский каталог, а также добавил, что функция должна вызываться с родительским именем, например active('website/index')

 lt;?php function active($currect_page){  $url = basename(getcwd())."/".str_replace(".php", "", basename($_SERVER['PHP_SELF']));  //If filename is just "name" or "name.php"  //Also checks which directory the file is in, to avoid highlighting multiple menu items with same name  //$currect_page == $url :: parentFolder/fileName == parentFolder/fileName (without .php here)  if($currect_page == $url || $currect_page == basename(getcwd())."/".basename($_SERVER['PHP_SELF'])){  echo 'active'; //class name in css  } } ?gt;  lt;div class="right-nav"gt;  lt;a href="/metrics/website/index" class="lt;?php active('website/index'); ?gt;"gt;Homelt;/agt;  lt;a href="/metrics/website/pages/archives" class="lt;?php active('pages/archives'); ?gt;"gt;Archiveslt;/agt; lt;/divgt;