Можно еще немного сократить
<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]
];
const buttons = [buttonLinkA, buttonLinkA1, buttonLinkA2, buttonLinkA3, buttonLinkB, buttonLinkC];
buttons.forEach((but, i) => {
but.addEventListener('click', function(e){
showSection(i);
//locPushState('#a');
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>
ЗЫ jsfiddle.net не работает в РФ. VPN приходится включать.