JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
    <li class="active"> <a data-toggle="tab" href="#tab-add" data-value="#add">add</a>

    </li>
    <li> <a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a>

    </li>
    <li> <a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a>

    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane" id="tab-add">Add panel</div>
    <div class="tab-pane" id="tab-edit">Edit panel</div>
    <div class="tab-pane" id="tab-delete">Panel panel</div>
</div>

JavaScript

$(function () {
            var navTabs = $('.nav-tabs a');
    
            var hash = window.location.hash;
            hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');
    
            navTabs.on('shown', function (e) {
                var status = $(e.target).attr('data-value');
                window.location.hash = status;
            });
        })