<head>
<style>
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 1.8;
font-weight: 400;
background: #fff;
padding: 0;
margin: 15px;
}
ul {
display: inline;
margin-bottom: 20px;
padding: 0;
}
ul li{
display: inline-block;
background: #eee;
}
ul li a{
padding: 10px 15px;
}
.content div .active{
display: block;
}
.content div:not(.active){
display: none;
}
</style>
</head>
<body>
<ul>
<li class="li"><a href="#" id="buttonLinkA">A</a></li>
<ul>
<li class="li"><a href="#" id="buttonLinkA1">A1</a></li>
<li class="li"><a href="#" id="buttonLinkA2">A2</a></li>
<li class="li"><a href="#" id="buttonLinkA3">A3</a></li>
</ul>
<li><a href="#" id="buttonLinkB">B</a></li>
<li><a href="#" id="buttonLinkC">C</a></li>
</ul>
<div class="content">
<div id="a1Section1">a1Section1</div>
<div id="a1Section2">a1Section2</div>
<div id="a1Section3">a1Section3</div>
<div id="a1Section4">a1Section4</div>
<div id="a1Section5">a1Section5</div>
<div id="a2Section1">a2Section1</div>
<div id="a2Section2">a2Section2</div>
<div id="a2Section3">a2Section3</div>
<div id="a2Section4">a2Section4</div>
<div id="a2Section5">a2Section5</div>
<div id="a3Section1">a3Section1</div>
<div id="a3Section2">a3Section2</div>
<div id="a3Section3">a3Section3</div>
<div id="a3Section4">a3Section4</div>
<div id="a3Section5">a3Section5</div>
<div id="bSection1">bSection1</div>
<div id="bSection2">bSection2</div>
<div id="bSection3">bSection3</div>
<div id="bSection4">bSection4</div>
<div id="bSection5">bSection5</div>
<div id="cSection1">cSection1</div>
<div id="cSection2">cSection2</div>
<div id="cSection3">cSection3</div>
<div id="cSection4">cSection4</div>
<div id="cSection5">cSection5</div>
</div>
<script>
const sections = [
[a1Section1, a1Section2, a1Section3, a1Section4, a1Section5],
[a1Section1, a1Section2, a1Section3, a1Section4, a1Section5],
[a2Section1, a2Section2, a2Section3, a2Section4, a2Section5],
[a3Section1, a3Section2, a3Section3, a3Section4, a3Section5],
[bSection1, bSection2, bSection3, bSection4, bSection5],
[cSection1, cSection2, cSection3, cSection4, cSection5]
];
buttonLinkA.addEventListener('click', function(e){
showSection(0);
//locPushState('#a');
e.preventDefault();
});
buttonLinkA1.addEventListener('click', function(e){
showSection(1);
//locPushState('#a1');
e.preventDefault();
});
buttonLinkA2.addEventListener('click', function(e){
showSection(2);
//locPushState('#a2');
e.preventDefault();
});
buttonLinkA3.addEventListener('click', function(e){
showSection(3);
//locPushState('#a3');
e.preventDefault();
});
buttonLinkB.addEventListener('click', function(e){
showSection(4);
//locPushState('#b');
e.preventDefault();
});
buttonLinkC.addEventListener('click', function(e){
showSection(5)
//locPushState('#c');
e.preventDefault();
});
function showSection(numsect){
sections.flat().forEach(sec => sec.classList.remove('show', 'active'));
sections[numsect].forEach(sec => sec.classList.add('show', 'active'));
}
</script>
</body>