如何使用javascript創建上一個按鈕？

Question

當我單擊“提交”按鈕時，頁面將重定向到下一個選項卡。但是，當我單擊“上一步”按鈕時，頁面不會重定向到上一個選項卡。

 $("#myTabs form").on('submit', function (e) { e.preventDefault(); var linkHref = $(this).parents('.tab-pane').attr('id'); $('#myLinks li a').removeClass('active'); $('#myLinks li') .find('a[href="#' + linkHref + '"]') .parent() .next() .find('a') .tab('show') .addClass('active') .attr('data-toggle', 'tab'); $('a.nav-link').not('.active').css('pointer-events', 'none'); }); $('a.nav-link').not('.active').css('pointer-events', 'none'); $(document).ready(function () { $("#PrevProduct").click(function (e) { e.preventDefault(); var linkHref = "tabs-1-tab-1"; $('#myLinks li a').removeClass('active'); $('#myLinks li') .find('a[href="#' + linkHref + '"]') .parent() .next() .find('a') .tab('show') .addClass('active') .attr('data-toggle', 'tab'); $('a.nav-link').not('.active').css('pointer-events', 'none'); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="page-content"> <div class="container-fluid"> <header class="section-header"> <div class="tbl"> <div class="tbl-row"> <div class="tbl-cell"> <h2>Company Registration Form</h2> </div> </div> </div> </header> <section class="tabs-section"> <div class="tabs-section-nav tabs-section-nav-icons"> <div class="tbl"> <ul class="nav nav-tabs" role="tablist" id="myLinks"> <li class="nav-item"> <a class="nav-link active" href="#home" role="tab" data-toggle="tab"> <span class="nav-link-in"> <i class="font-icon font-icon-cogwheel"></i> Company Registration Form </span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#menu1" role="tab" data-toggle="tab"> <span class="nav-link-in"> <span class="glyphicon glyphicon-music"></span> Company Social Network </span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#menu2" role="tab" data-toggle="tab"> <span class="nav-link-in"> <i class="fa fa-product-hunt"></i> Company Reference </span> </a> </li> </ul> </div> </div><!--.tabs-section-nav--> <div class="tab-content" id="myTabs"> <div role="tabpanel" class="tab-pane fade in active show" id="home"> <form id="form" action=""> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!--.tab-pane--> <div role="tabpanel" class="tab-pane fade" id="menu1"> <form id="form" action=""> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> <button type="button" id="PrevProduct" class="btn btn-rounded btn-inline btn-primary">Previous</button> </form> </div><!--.tab-pane--> <div role="tabpanel" class="tab-pane fade" id="menu2"> <form id="form" action=""> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!--.tab-pane--> </div><!--.tab-content--> </section> </div> </div> 

Answer 1

問題出在這一點：

            var linkHref = "home";
            $('#myLinks li a').removeClass('active');
            $('#myLinks li')
              .find('a[href="#' + linkHref + '"]')
              .parent()
              .find('a')
              .tab('show')
              .addClass('active')
              .attr('data-toggle', 'tab');
            $('a.nav-link').not('.active').css('pointer-events', 'none');

我刪除了next()因為這將轉到下一個同級項（這是當前選項卡），並調整了上一個按鈕href以匹配home 。

 $("#myTabs form").on('submit', function (e) { e.preventDefault(); var linkHref = $(this).parents('.tab-pane').attr('id'); $('#myLinks li a').removeClass('active'); $('#myLinks li') .find('a[href="#' + linkHref + '"]') .parent() .next() .find('a') .tab('show') .addClass('active') .attr('data-toggle', 'tab'); $('a.nav-link').not('.active').css('pointer-events', 'none'); }); $('a.nav-link').not('.active').css('pointer-events', 'none'); $(document).ready(function () { $("#PrevProduct").click(function (e) { e.preventDefault(); var linkHref = "home"; $('#myLinks li a').removeClass('active'); $('#myLinks li') .find('a[href="#' + linkHref + '"]') .parent() .find('a') .tab('show') .addClass('active') .attr('data-toggle', 'tab'); $('a.nav-link').not('.active').css('pointer-events', 'none'); }); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="page-content"> <div class="container-fluid"> <header class="section-header"> <div class="tbl"> <div class="tbl-row"> <div class="tbl-cell"> <h2>Company Registration Form</h2> </div> </div> </div> </header> <section class="tabs-section"> <div class="tabs-section-nav tabs-section-nav-icons"> <div class="tbl"> <ul class="nav nav-tabs" role="tablist" id="myLinks"> <li class="nav-item"> <a class="nav-link active" href="#home" role="tab" data-toggle="tab"> <span class="nav-link-in"> <i class="font-icon font-icon-cogwheel"></i> Company Registration Form </span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#menu1" role="tab" data-toggle="tab"> <span class="nav-link-in"> <span class="glyphicon glyphicon-music"></span> Company Social Network </span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#menu2" role="tab" data-toggle="tab"> <span class="nav-link-in"> <i class="fa fa-product-hunt"></i> Company Reference </span> </a> </li> </ul> </div> </div><!--.tabs-section-nav--> <div class="tab-content" id="myTabs"> <div role="tabpanel" class="tab-pane fade in active show" id="home"> <form id="form" action=""> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!--.tab-pane--> <div role="tabpanel" class="tab-pane fade" id="menu1"> <form id="form" action=""> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> <button type="button" id="PrevProduct" class="btn btn-rounded btn-inline btn-primary">Previous</button> </form> </div><!--.tab-pane--> <div role="tabpanel" class="tab-pane fade" id="menu2"> <form id="form" action=""> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!--.tab-pane--> </div><!--.tab-content--> </section> </div> </div>