“cara membuat tab nav dengan javascript dengan validasi untuk pindah ke tab berikutnya” Kode Jawaban

cara membuat tab nav dengan javascript dengan validasi untuk pindah ke tab berikutnya

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    Home Tab Content<br>
    <input type="text" id="homeText" /> Enter some value
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Tab Content</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Tab Content</div>
</div>
Jolly Jellyfish

cara membuat tab nav dengan javascript dengan validasi untuk pindah ke tab berikutnya

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

function isValid() {
  const text = $("#homeText").val();
  if (text.length === 0) {
    return false;
  }
  return true;
}
Jolly Jellyfish

Jawaban yang mirip dengan “cara membuat tab nav dengan javascript dengan validasi untuk pindah ke tab berikutnya”

Pertanyaan yang mirip dengan “cara membuat tab nav dengan javascript dengan validasi untuk pindah ke tab berikutnya”

Lebih banyak jawaban terkait untuk “cara membuat tab nav dengan javascript dengan validasi untuk pindah ke tab berikutnya” di JavaScript

Jelajahi jawaban kode populer menurut bahasa

Jelajahi bahasa kode lainnya