JSFiddle - React, Tailwind, and code Playground

by Debarupa

HTML

<div id="tabs">
 <div data-role="header" data-id="foo1" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#tabs-1">User - Part 1</a></li>
            <li><a href="#tabs-2">User - Part 2</a></li>
            <li><a href="#tabs-3">User - Part 3</a></li>
            <li><a href="#tabs-4">Manage App. Role</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /header -->
     <div id="tabs-1" class="content_div">
      
      <div class="center">
        <input data-val="true" data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="05733acd-960e-4124-a9c0-292fb63bf1c2" />
        <input type="hidden" name="tab" id="tab" value="1" />
        <div class="editor-label">
          <label for="Phone">Telephone Number</label>
        </div>
        <div class="editor-field">
          <input class="text-box single-line" data-val="true" data-val-phonevalidation="Phone is invalid." id="Phone" name="Phone" type="text" value="1234567890" />
          <span class="field-validation-valid" data-valmsg-for="Phone" data-valmsg-replace="true"></span>
        </div>

      </div>
  </div>
  <div id="tabs-2" class="content_div">
      
      <div class="center">
        <input id="Id" name="Id" type="hidden" value="05733acd-960e-4124-a9c0-292fb63bf1c2" />
        <input type="hidden" name="tab" id="tab" value="2" />
         <div class="editor-label">
          <label for="State">State</label>
        </div>
        <div class="editor-field">
          <select id="State" name="State"><option value="">Select One</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option selected="selected" value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option...

CSS

#tabs-1, #tabs-2, #tabs-3, #tabs-4
  {
    display: none;
    }

JavaScript

$(document).ready(function () {
         $('div[data-role="navbar"] ul li a').click(function () {
        $(this).addClass('ui-btn-active ui-state-persist');
        $('.content_div').hide();
        $('div#' + $(this).attr('href')).show();
        var test = $('div#' + $(this).attr('href')).attr("id");
        alert(test);

      });

    });