JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<div id="link" data-link="real-link.com" >Some element</div>
<a href="page1">Link#1</a><br>
<a href="page2">Link#2</a><br>
<a href="page3">Link#3</a><br>
<a href="someUndefinedPage">Link#4</a><br>
<div class="page" id="page1">
  <h1>Content for page#1</h1>
</div>
<div class="page" id="page2">
  <h1>Content for page#2</h1>
</div>
<div class="page" id="page3">
  <h1>Content for page#3</h1>
</div>
<div class="page" id="page404">
  <h1>404 page not found</h1>
</div>

CSS

.hide{
   display:none;
 }
 .green{
   color:green;
 }

JavaScript

var elements = document.getElementsByTagName('a');
var pages = document.getElementsByClassName('page');
var page404 = document.getElementById('page404');
var hideAll = function(list){
	for(var i = 0, len = list.length; i<len; i++){
  	list[i].classList.add('hide');
  }
}
var handlers = {
	'page1':function(){
  	//do something
  },
  'page2':function(){
  	document.getElementById('page2').classList.toggle('green');
  }
}
var router = function(link){
	var el = document.getElementById(link);
  hideAll(pages);
  if(el){
    el.classList.remove('hide');
    if(handlers[link]){
    	handlers[link]();
    }
  } else{
  	page404.classList.remove('hide');
  }
}
hideAll(pages);
router('page1')
for(var i = 0, len = elements.length; i<len; i++){
	elements[i].addEventListener( 'click' , function(e) {
		e.preventDefault();
    router(this.getAttribute('href'))
 	}, false);
 }
document.getElementById('link').addEventListener( 'click' , function(e) {
  location.href=this.getAttribute('data-link');
});