bootsrip වල tap දාල හදලා තියෙන්නේ .
මට button click කරන කොට මට ඕනි tab 1a show කරගන්ට .
මේ function එක වෙනවා .
එත් මට ඕනි button click event 1n මට ඕනි tab එක show කරගන්ට .
මේක කරන විදිය කොහොමද ..
<script>
$(document).ready(function () {
$('#activateProfileTab').click(function () {
$('#profile-tab').tab('show'); // Activate the Profile tab
});
});
</script>
මට button click කරන කොට මට ඕනි tab 1a show කරගන්ට .
මේ function එක වෙනවා .
එත් මට ඕනි button click event 1n මට ඕනි tab එක show කරගන්ට .
මේක කරන විදිය කොහොමද ..
<script>
$(document).ready(function () {
$('#activateProfileTab').click(function () {
$('#profile-tab').tab('show'); // Activate the Profile tab
});
});
</script>
JavaScript:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<!-- Tab links -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<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">
<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">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<!-- Tab content -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home content...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile content...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact content...</div>
</div>
<!-- Button to activate a specific tab -->
<button id="activateProfileTab" class="btn btn-primary mt-3">Activate Profile Tab</button>
</div>
<!-- jQuery script to activate the tab on button click -->
<script>
$(document).ready(function () {
$('#activateProfileTab').click(function () {
$('#profile-tab').tab('show'); // Activate the Profile tab
});
});
</script>