Как отображать нужный div в зависимости от якоря в ссылке?

Question

[valitskiydmitriy]

Есть такая структура страницы:

<ul>
	<li>
		<a href="#earth">earth</a>
		<a href="#mars">mars</a>
		<a href="#saturn">saturn</a>
		<a href="#usa">usa</a>
		<a href="#kazakhstan">kazakhstan</a>
	</li>
</ul>

<div class="container">
	<div id="earth">
		 Content
	</div>
	<div id="mars">
		 Content
	</div>
	<div id="kazakhstan">
		 Content
	</div>

	e.t.c
</div>

Есть один Div который отображается по умолчанию. Соответсвенно по нажатию на другую ссылку все Div скрываются. Отображается один. Это все хорошо, все работает.

Вопрос в том как сделать так что бы если была ссылка testsite.ru/#usa при открытии отображался именно этот блок? Спасибо!

Answer 1

[Stalker_RED]

const defaultHash = '#earth'
const id = location.hash || defaultHash
document.querySelector(id).style.display = 'block'

Comments

[valitskiydmitriy]

Спасибо. Но я немного не понимаю принцип работы. Если оставлять просто ссылку без якоря то элемент earth всеравно отображается? В каком месте он смотри на содержимое ссылки?

[Stalker_RED]

valitskiydmitriy: defaultHash - блок отображаемый по умолчанию.
А "смотрит на ссылку" он при помощи location.hash

[valitskiydmitriy]

Stalker_RED: Все, разобрался. Спасибо вам!

Answer 2

[Алексей Зуйков]

Напишите функцию на js, который через свойства CSS показывает div с нужным I'd и скрывает остальные.