JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="profile" role="tab">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="messages" role="tab">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="settings" role="tab">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">.</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">..</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">....</div>
</div>

JavaScript

$(".nav-link").on("click", function(e) {
           $(".nav-link").each(function(i) {
           pageUrl = $(this).attr("href");
           $(this).attr("href", "");
           $(this).attr("href", "#"+pageUrl);
           });
           
           //$('a[href="'+$(this).attr("href")+'"]').tab("show");
    

          
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
           
           $(".nav-link").each(function(i) {
           pageUrl = $(this).attr("href").replace("#","");
           $(this).attr("href", "");
           $(this).attr("href", pageUrl);
            });
});