JSFiddle - React, Tailwind, and code Playground

by Awesome

HTML

<div class="tab-box"> 
<a href="#companyinfo" class="tabLink activeLink">Company</a> 
<a href="#contacts" class="tabLink">Contacts</a>
</div>

<div class="tabcontent" id="companyinfo-1"> 
    company info
</div>

<div class="tabcontent" id="contacts-1"> 
    contacts
</div>

CSS

.tab-box {
	border-bottom: 1px solid #666666;
	padding-bottom:5px;
}
a.tabLink {
    margin-top: 5px;
display:inline-block;
}
.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;
}
.tab-box a.activeLink { 
  background-color: #eeeeee;
  color:#666666;
  border-bottom: 0; 
  padding: 5px 15px;
}
.tabcontent {
	padding: 5px;
	width: 99%;
}
.hide { display: none;}
.small { color: #999; margin-top: 100px; border: 1px solid #EEE; padding: 5px; font-size: 9px; font-family:Calibri; }

JavaScript

var originalHash = window.location.hash;

$(document).ready(function () {
    $(window).bind('hashchange', function () {
        // remove all active
        $(".tabLink").removeClass("activeLink");
        $(".tabcontent").addClass("hide");
        
        // http://stackoverflow.com/questions/7699073/window-bind-hashchange-how-to-check-part-hash-changed
        var newHash = window.location.hash;
        var _origHash = originalHash;
        originalHash = newHash;
        
        // log
        console.log('original: ' + _origHash);
        console.log('new: ' + newHash);
        
        // update active
        $('[href="' + newHash + '"]').addClass("activeLink");
        $(newHash + '-1').removeClass("hide");
    });

    // init    
    $(".tabcontent").addClass("hide");
    $($(".activeLink").attr('href') + '-1').removeClass("hide");
});