document.addEventListener("DOMContentLoaded", function(event) {
let tab = document.querySelector(location.hash)
if (tab) {
tab.classList.add('active')
}
});
<html>
<head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.main{
width: 960px;
margin: 10px auto 0 auto;
background: white;
padding: 30px;
border: 1px solid #adaa9f;
}
ul, div{
margin-bottom: 10px;
}
.main>div{
padding: 10px;
border: 1px solid #eaeaea;
display: none;
}
.main div:target{
display: block;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li><a href="#id1">Блок 1</a></li>
<li><a href="#id2">Блок 2</a></li>
<li><a href="#id3">Блок 3</a></li>
<li><a href="#id4">Блок 4</a></li>
</ul>
<div id="id1">Текст 1</div>
<div id="id2">Текст 2</div>
<div id="id3">Текст 3</div>
<div id="id4">Текст 4</div>
</div>
</body>
</html>
Простой
Средний
Простой
