Как реализовать передачу атрибута на новую страницу при переходе на нее по ссылке?

Question

[304]

Суть реализации:

Есть страница index - на ней 3 кнопки
Есть страница page на ней 3 diva
При нажатии на кнопку #1 открывается страница page и divу #1 передается класс "active"
При нажатии на кнопку #2 открывается страница page и divу #2 передается класс "active"
И так далее по аналогии

Какая реализация, на Ваш взгляд, наиболее оптимальна?

Answer 1

[Павел Корнилов]

Не знаю насчет оптимальности, но самое простое - передать в ГЕТ-параметре.
<a href="/?attr=true">

Comments

[304]

А потом через php получить его и подставить в класс?

[Павел Корнилов]

Можно как на сервере, так и на клиенте получить этот параметр. Зависит от задачи.

[304]

Думал без php реализовать , а писать велосипед для расшифровки гет параметров на js не хочется;
Может знаешь какие библиотеки для работы c гетами на ваниле?

[Павел Корнилов]

да, location.search()
Сейчас поищу свой велосипед =)

[Павел Корнилов]

function Get() {
			if (window.location.search.length === 0) return false;
			var out = {},
				key = location.search.replace(/\?/, "").split(/\&/),
				dimkey;
			Object.keys(key).forEach(function (i) {
				dimkey = key[i].toString().split(/\=/);
				out[dimkey[0]] = dimkey[1] && decodeURI(dimkey[1]) || null;
			});
			return out;
		}

[304]

благодарю)

[Павел Корнилов]

304, на здоровье. Функция очень простая и работает, по-моему, везде. IE8+.

Answer 2

[ой всё]

такие вещи делают на сервере при генерации страницы

Answer 3

[Aleksey Solovyev]

Зачем создавать разные страницы? У Вас простой SPA. Ну и посмотрите в сторону Veu, React, Angular...
ну а если очень надо, то браузеры изначально дают Вам возможность сохранять данные. Для этого используйте localStorage\sessionStorage\cookie. Выберите что будет для Вас удобней и что Вам нужно в конечном итоге. После используйте их на какой угодно странице.
На первой сохранили значение кнопки
На второй проверили какое значение было у кнопки -> добавили класс

https://developer.mozilla.org/en-US/docs/Web/API/W...