Одна стилизованная HTML-страница с динамическим контентом

У меня есть вопрос, что я могу просто переусердствовать. Таким образом, у меня есть три ссылки на странице. Все три ссылки откроют одну и ту же страницу HTML. Единственная проблема заключается в том, что я хочу отображать разные изображения в зависимости от того, какая ссылка нажата.

Я не хочу создавать три разных варианта одной и той же страницы, так что есть ли способ сделать это динамически (возможно, Javascript?)

Любая помощь будет оценена по достоинству.

Благодарю!

3 ответа

Самый простой способ представить эту работу - использовать хэш в URL-адресе элементов на странице:

<a href="http://example.com/path/to/page.html#imgOne" target="_blank">Link to show image one</a>
<a href="http://example.com/path/to/page.html#imgTwo" target="_blank">Link to show image two</a>
<a href="http://example.com/path/to/page.html#imgThree" target="_blank">Link to show image three</a>

И на странице получения CSS:

/* selects the relevant images: */
.imgClass {
 /* hides them: */
 display: none;
}

/* selects the image whose id appears in the URL: */
.imgClass:target {
 /* shows that image: */
 display: inline-block;
}

Справка:


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

Предположим, что имя второй страницы - это images.html, вы можете вызвать ссылку как images.html? Img = 1 или images.html? Img = 2 и т.д., На странице вам нужно использовать javascript для чтения значений строки запроса. по значению img вы можете загружать разные изображения. Проверьте этот stackoverflow для получения более подробной информации.

Как получить значения строки запроса в JavaScript?


Используйте параметр запроса.

Ссылка 1 может указывать на /page?link=1, ссылка 2 может перейти на /page?link=2 и т.д. Вероятно, вы захотите обобщить "какой образ должен отображаться", но вы получите суть. Не забудьте включить некоторое значение по умолчанию в случае, если параметр не представлен.

И для записи вы обычно обрабатываете запрос и выбираете сервер изображений, хотя да, вы также можете сделать это в JavaScript.

licensed under cc by-sa 3.0 with attribution.