В веб-разработке активную страницу обычно выделяют в меню навигации или применяют к ней уникальный стиль. Один из способов добиться этого — добавить «активный» класс к соответствующему пункту меню. Чтобы добавить «активный» класс, вам необходимо динамически определять имя текущей страницы. В этой статье мы рассмотрим различные методы выполнения этой задачи и предоставим разговорные объяснения вместе с примерами кода. Давайте погрузимся!

Метод 1: использование объекта window.location JavaScript
Самый простой способ получить имя текущей страницы — использовать объект window.location. Он предоставляет информацию о текущем URL-адресе, включая имя страницы. Вот пример:

const currentPageName = window.location.pathname.split('/').pop();
console.log(currentPageName);

Метод 2: использование объектной модели документа (DOM)
Другой подход предполагает использование объектной модели документа (DOM) для извлечения имени текущей страницы. Мы можем получить доступ к тегу <title>и получить из него имя страницы. Вот как это можно сделать:

const currentPageName = document.title;
console.log(currentPageName);

Метод 3: использование серверных методов
Если вы работаете с серверными технологиями, такими как PHP, вы можете получить текущее имя страницы, используя серверные переменные. Вот пример использования PHP:

$current_page_name = basename($_SERVER['PHP_SELF']);
echo $current_page_name;

Метод 4: извлечение имени страницы из URL-адреса
В некоторых случаях имя страницы можно извлечь непосредственно из URL-адреса. Этот метод предполагает согласованную структуру URL-адресов, например, имя страницы в качестве последнего сегмента. Вот пример использования JavaScript:

const currentPageName = window.location.href.split('/').pop();
console.log(currentPageName);

Метод 5: использование регулярных выражений
Если вам нужна большая гибкость при извлечении имени страницы, регулярные выражения могут пригодиться. Вы можете определить шаблон, соответствующий желаемому формату имени страницы, и извлечь его соответствующим образом. Вот пример JavaScript:

const urlPattern = /\/([^\/]+)$/; // Matches the last segment of the URL
const currentPageName = urlPattern.exec(window.location.pathname)[1];
console.log(currentPageName);

В этой статье мы рассмотрели несколько методов получения имени текущей страницы для применения «активного» класса к пунктам меню. Предпочитаете ли вы JavaScript, манипулирование DOM, методы на стороне сервера или даже регулярные выражения, в вашем распоряжении есть множество вариантов. Не забудьте выбрать метод, который соответствует конкретным требованиям вашего проекта. Реализация этих методов улучшит взаимодействие с пользователем и обеспечит визуально привлекательное меню навигации.