JSFiddle - React, Tailwind, and code Playground

by Avinashullal

HTML

<ul id="page_box_links">
  <li><a href="#">IRP(Issue List)</a>
    <div>
    </div>
  </li>
  <li><a href="#">LM Visit Report</a>
    <div>
    </div>
  </li>
  <li><a id="tracker" href="#">SVA Tracker</a>
    <div>
    </div>
  </li>
  <li><a href="#">SVA Issue Log</a>
    <div>
    </div>
  </li>
  <li><a href="#" style="display: none;" class="inactiveLink">Trending Report</a>
    <div>
    </div>
  </li>

</ul>
<div class="tab-pane" id="item">
  <h2>SVA tracker</h2>
  <ul class="nav nav-tabs">
    <li><a href="#" data-toggle="tab">Remote Monitoring</a></li>
    <li><a href="#" data-toggle="tab">On Site Monitoring Visit</a></li>
  </ul>
  <br />
</div>

CSS

.tab-pane{
  display:none;
}
.tab-pane.active{
  display:block;
}

JavaScript

//  function pageLoad(sender, args) {
$(document).ready(function() {
  var url = window.location.pathname,
    // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
  // now grab every link from the navigation
  $('#page_box_links a').each(function() {
    // and test its normalized href against the url pathname regexp
    if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
      $(this).addClass('active');
    }
  });
});
//}
$(document).ready(function() {
  $("#tracker").click(function(event) {
  $("#item").removeClass('active');
    $("#item").addClass('active');
  });
});