Как я могу заменить HTML и CSS на странице в зависимости от URL

Question

У меня есть навигация как таковая: HOME TRAVEL MEDIA

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

ПУТЕШЕСТВИЯ

основной цвет = @ красный

текст = Вы находитесь в разделе путешествий

МЕДИА

основной цвет = @ синий

text = Вы находитесь в разделе «Медиа»

Как я могу динамически загрузить эти элементы и изменить CSS в зависимости от URL?Я предполагаю, что мне нужно будет создать массив для каждого раздела и вызвать переменные в зависимости от URL, но как я могу изменить CSS?

Answer 1

Вы должны использовать javascript для достижения такого рода при динамических изменениях.Чтобы получить URL, вы можете использовать window.location.href. Затем с помощью оператора «if» вы можете контролировать каждую страницу.Например:

if (window.location.href == "http://www.yourwebsite.com/TRAVEL")
    document.getElementById("yourCssElement").classList.add('travel');

То же самое относится и к другим страницам.

Затем в css вы устанавливаете нужный стиль для каждого класса (путешествия, медиа и т. Д.)

И все, когда вы загружаете страницу с соответствующим URL, соответствующий класс будет добавлен в ваш элемент.