jQuery选项卡移动到按钮单击时的最后一个选项卡

我正在拉威尔制作一个电子商务web应用程序，我在管理面板中添加产品时遇到了困难

有3个选项卡用于添加产品

一般资料

元信息

产品选项

我使用AJAX将数据插入数据库

我的问题是，每当我点击submit按钮时，当数据通过并返回

success

消息时，当前选项卡移动到最后一个选项卡，这意味着，如果我在general选项卡上，当我点击submit按钮general选项卡时，最后一个选项卡变为活动状态，而不是meta。我希望它应该按顺序进行

HTML:

<ul class="nav nav-tabs">
    <li class="active"><a href="#general" data-toggle="tab">General</a></li>
    <li><a href="#meta" data-toggle="tab">Meta</a></li>
    <li><a href="#options" data-toggle="tab">Options</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active fade in" id="general">
        <div class="errors"></div>

        {!! Form::open(['files' => 'true', 'autocomplete' => 'off', 'name' => 'formAddProductGeneralInfo']) !!}
            <div class="form-group">
                {!! Form::label('code', 'Code:') !!}
                {!! Form::text('code', null, ['class' => 'form-control input-sm']) !!}
            </div>

            <div class="form-group">
                {!! Form::label('name', 'Name:') !!}
                {!! Form::text('name', null, ['class' => 'form-control input-sm']) !!}
            </div>

            <div class="form-group">
                {!! Form::label('quantity', 'Quantity in Stock:') !!}
                {!! Form::text('quantity', null, ['class' => 'form-control input-sm']) !!}
            </div>

            <div class="form-group">
                {!! Form::submit( 'Add', ['class' => 'btn btn-primary btn-block', 'id' => 'btnAddProductGeneral'] ) !!}
            </div>
        {!! Form::close() !!}
    </div>

    <div class="tab-pane" id="meta">
        meta
    </div>

    <div class="tab-pane" id="options">
        options
    </div>
</div>

$("form[name='formAddProductGeneralInfo']").submit(function(e) {
    var inputData = new FormData($(this)[0]);
    $.ajax({
        url: '{{ url('/admin/products/general') }}',
        type: 'POST',
        data: inputData,
        async: true,
        success: function( message ) {
            if ( message.status === 'success' ) {
                toastr.success(message.msg, 'Successs!');

                $( '.nav-tabs').find('li').next().addClass('active');
                $( '.tab-content').find('div.active').next().addClass('active');

                $( '.nav-tabs').find('li').prev().removeClass('active');
                $( '.tab-content').find('div.active').prev().removeClass('active');
            } else {
                toastr.error(message.msg, msg.status);
            }
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each( errors, function( key, value ) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $( '.errors' ).html( errorsHtml );
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
    //e.preventDefault();
    return false;
});

{！！Form:：open（['files'=>'true'，'autocomplete'=>'off'，'name'=>'formAddProductGeneralInfo']）
{！！Form:：label（'code'，'code:'）
{！！Form:：text（'code'，null，['class'=>'表单控制输入sm']）
{！！Form:：label（'name'，'name:'）
{！！表单：：text（'name'，null，['class'=>'表单控制输入sm']）
{！！表单：：标签（'数量'，'库存数量：'）
{！！Form:：text（'quantity'，null，['class'=>'Form control input sm']）
{！！表单：：提交（'Add'，['class'=>'btn btn主btn块'，'id'=>'btnAddProductGeneral']）
{！！Form:：close（）！！}
元
选择权

jQuery AJAX:

<ul class="nav nav-tabs">
    <li class="active"><a href="#general" data-toggle="tab">General</a></li>
    <li><a href="#meta" data-toggle="tab">Meta</a></li>
    <li><a href="#options" data-toggle="tab">Options</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active fade in" id="general">
        <div class="errors"></div>

        {!! Form::open(['files' => 'true', 'autocomplete' => 'off', 'name' => 'formAddProductGeneralInfo']) !!}
            <div class="form-group">
                {!! Form::label('code', 'Code:') !!}
                {!! Form::text('code', null, ['class' => 'form-control input-sm']) !!}
            </div>

            <div class="form-group">
                {!! Form::label('name', 'Name:') !!}
                {!! Form::text('name', null, ['class' => 'form-control input-sm']) !!}
            </div>

            <div class="form-group">
                {!! Form::label('quantity', 'Quantity in Stock:') !!}
                {!! Form::text('quantity', null, ['class' => 'form-control input-sm']) !!}
            </div>

            <div class="form-group">
                {!! Form::submit( 'Add', ['class' => 'btn btn-primary btn-block', 'id' => 'btnAddProductGeneral'] ) !!}
            </div>
        {!! Form::close() !!}
    </div>

    <div class="tab-pane" id="meta">
        meta
    </div>

    <div class="tab-pane" id="options">
        options
    </div>
</div>

$("form[name='formAddProductGeneralInfo']").submit(function(e) {
    var inputData = new FormData($(this)[0]);
    $.ajax({
        url: '{{ url('/admin/products/general') }}',
        type: 'POST',
        data: inputData,
        async: true,
        success: function( message ) {
            if ( message.status === 'success' ) {
                toastr.success(message.msg, 'Successs!');

                $( '.nav-tabs').find('li').next().addClass('active');
                $( '.tab-content').find('div.active').next().addClass('active');

                $( '.nav-tabs').find('li').prev().removeClass('active');
                $( '.tab-content').find('div.active').prev().removeClass('active');
            } else {
                toastr.error(message.msg, msg.status);
            }
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each( errors, function( key, value ) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $( '.errors' ).html( errorsHtml );
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
    //e.preventDefault();
    return false;
});

$（“form[name='formAddProductGeneralInfo']）。提交（函数（e）{
var inputData=newformdata（$（this）[0]）；
$.ajax({
url:{{url（'/admin/products/general'）}}，
键入：“POST”，
数据：输入数据，
async:true，
成功：功能（消息）{
如果（message.status==='success'）{
toastr.success（message.msg，'Successs！'）；
$（'.nav tabs'）.find（'li'）.next（）.addClass（'active'）；
$（'.tab content'）.find（'div.active'）.next（）.addClass（'active'）；
$（'.nav tabs'）.find（'li'）.prev（）.removeClass（'active'）；
$（'.tab content'）.find（'div.active'）.prev（）.removeClass（'active'）；
}否则{
toastr.error（message.msg，msg.status）；
}
},
错误：函数（数据）{
如果（data.status==422）{
var errors=data.responseJSON；
var errorsHtml='
'；
errorsHtml+='×；'；
$.each（错误、函数（键、值）{
errorsHtml+='
'+值[0]+'
'；
});
errorsHtml+='
'；
$（'.errors'）.html（errorsHtml）；
}
},
cache:false，
contentType:false，
processData:false
});
//e、 预防默认值（）；
返回false；
});

我哪里出错了

---

请帮帮我。谢谢。

我会对您当前的js进行轻微修改，并检查它是否解决了您的问题：

$("form[name='formAddProductGeneralInfo']").submit(function(e) {
    var currentli=$('.nav-tabs').find('li.active')//keep reference to your active li
    var currentContent=$('.tab-content').find('div.active');//reference to your current active content
    var inputData = new FormData($(this)[0]);
    $.ajax({
        url: '{{ url('/admin/products/general') }}',
        type: 'POST',
        data: inputData,
        async: true,
        success: function( message ) {
            if ( message.status === 'success' ) {
                toastr.success(message.msg, 'Successs!');
                if(currentli.next().length) //check if it has next element, useful when you are at last tab
                {
                     currentli.removeClass('active').next().addClass('active');//remove from current and add to next
                     currentContent.removeClass('active').next().addClass('active'); 
                }

            } else {
                toastr.error(message.msg, msg.status);
            }
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                var errors = data.responseJSON;
                var errorsHtml = '<div class="alert alert-danger"><ul>';
                errorsHtml += '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>';
                $.each( errors, function( key, value ) {
                    errorsHtml += '<li>' + value[0] + '</li>';
                });
                errorsHtml += '</ul></div>';
                $( '.errors' ).html( errorsHtml );
            }
        },
        cache: false,
        contentType: false,
        processData: false
    });
    //e.preventDefault();
    return false;
});

---

请用呈现的HTML而不是模板代码来更新问题，好吗？我该怎么做？我使用的是AJAX，那会有帮助吗？检查

.tab内容

，然后发布到这里！点击按钮后还是点击按钮前？请不要使用

{！！Form:：close（）！！}

…随时！！我已经用代码中的错误更新了解决方案！！检查是否有任何疑问。。快乐的编码..投了赞成票。。感谢你指出错误，让我学到新东西：）再次感谢你。