change active tab on button click javascript
Change tab on button click javascript
Change tab on button click jquery
Change tab on button click stack overflow
Change tab on button click HTML Code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Forms</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body id="page-top">
<nav class="navbar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-logo">
<img src="" class="logo-full"></div>
</a>
</nav>
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Content Wrapper -->
<div id="content-wrapper" class="container d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Begin Page Content -->
<div class="container-fluid">
<div class="tabControl">
<div class="container">
<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-1" role="tab">Your Information</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-2" role="tab">Service Requirements</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-3" role="tab">Documents Needed</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-4" role="tab">Thank You!</a>
</li>
</ul>
</div>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-home-tab">
<h1> Tab 1 </h1>
<div class="col-6 col-sm-3" id="btnNext">
<a class="btn btn-primary btnNext">Next</a>
</div>
</div>
<div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-profile-tab">
<h1> Tab 2</h1>
<div class="navbuttons">
<div class="col-6 col-sm-3" id="btnPrevious">
<a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="col-6 col-sm-3" id="btnNext">
<a class="btn btn-primary btnNext">Next</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-contact-tab">
<h1> Tab 3 </h1>
<div class="navbuttons">
<div class="col-6 col-sm-3" id="btnPrevious">
<a class="btn btn-primary btnPrevious">Previous</a>
</div>
<div class="col-6 col-sm-3" id="btnNext">
<a class="btn btn-primary btnNext">Next</a>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-4" role="tabpanel" aria-labelledby="pills-contact-tab">Thank You</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/1b59bc20c8.js"></script>
</body>
</html>
JQuery Code
Java Script Code
$('.btnNext').click(function() {
$('.nav-pills .active').parent().next('li').find('a').trigger('click');
});
$('.btnPrevious').click(function() {
$('.nav-pills .active').parent().prev('li').find('a').trigger('click');
});
show next Prev tab on button click
2 Comments
Good