javascript - 如何使用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() 因为这将转到下一个 sibling (这是当前选项卡)并调整了上一个按钮 href 以匹配 首页。

$("#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>