JSFiddle - React, Tailwind, and code Playground
by SpAm
HTML
<a href="#">First</a>
<a href="#second">Second</a>
<a href="#third" >Third</a>
<a href="#fourth" >Fourth</a>
<div id="firstContent" class="hidden foo">
This is the first content
</div>
<div id="secondContent" class="hidden foo">
This is the second content
</div>
<div id="thirdContent" class="hidden foo">
This is the third content
</div>
<div id="fourthContent" class="hidden foo">
This is the fourth content
</div>
CSS
.hidden {
display:none;
}
JavaScript
function switchHash() {
$('.foo').addClass("hidden");
switch( window.location.hash ) {
case "#second":
$('#secondContent').removeClass("hidden");
break;
case "#third":
$('#thirdContent').removeClass("hidden");
break;
case "#fourth":
$('#fourthContent').removeClass("hidden");
break;
default:
$('#firstContent').removeClass("hidden");
}
}
window.addEventListener("hashchange", function(){
console.log("Hash changed to", window.location.hash);
// .... Do your thing here...
switchHash();
});
switchHash();