JSFiddle - React, Tailwind, and code Playground

by Mi_Creativity

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
     <h2>Tabs Testing</h2>

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#menu1">Tab1</a>

        </li>
        <li><a data-toggle="tab" href="#menu2">Tab2</a>

        </li>
        <li><a data-toggle="tab" href="#menu3">Tab3</a>

        </li>
        <li><a data-toggle="tab" href="#menu4">Tab4</a>

        </li>
    </ul>
    <div class="tab-content">
        <div id="menu1" class="tab-pane fade in active">
             <h3>Menu 1</h3>

            <p>This is tab one</p>
        </div>
        <div id="menu2" class="tab-pane fade">
             <h3>Menu 2</h3>

            <p>This is tab two</p>
        </div>
        <div id="menu3" class="tab-pane fade">
             <h3>Menu 3</h3>

            <p>This is tab three</p>
            <button id="loadIt" type="submit" class="btn btn-primary">Reload Page</button>
        </div>
        <div id="menu4" class="tab-pane fade">
             <h3>Menu 4</h3>

            <p>This is tab four</p>
        </div>
    </div>
</div>

JavaScript

var url, id;
$('#loadIt').on('click', function (event) {
    event.preventDefault();
    url = window.location.href;
    id = ((/#menu/).test(url)) ? "" : '#' + $(this).closest('div').attr('id');
    console.log(url + id);
    window.location.replace(url + id);
});