locked
Tab Control RRS feed

  • Question

  • User1979860870 posted

    Hi

      How to create Tab Control in Mvc with Validations

    Thanks

    Monday, May 24, 2021 4:37 AM

All replies

  • User287926715 posted

    Hi jagjit saini,

    Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs and pills to create tabbable panes of local content, even via dropdown menus.

    <!-- Nav tabs -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
      </li>
      <li class="nav-item" role="presentation">
        <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
      </li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
      <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
      <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
      <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
    </div>

    Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

    $('#myTab a').on('click', function (e) {
      e.preventDefault()
      $(this).tab('show')
    })

    You can activate individual tabs in several ways:

    $('#myTab a[href="#profile"]').tab('show') // Select tab by name
    $('#myTab li:first-child a').tab('show') // Select first tab
    $('#myTab li:last-child a').tab('show') // Select last tab
    $('#myTab li:nth-child(3) a').tab('show') // Select third tab

    Best Regards,

    ChaoDeng

    Tuesday, May 25, 2021 9:14 AM