如何在 ajax 调用成功时在 div 之间导航

Question

我正在开发单页应用程序，我一直在 div 之间导航，它很简单，但我想用 ajax 来做......

我想做类似当调用“成功”函数时它应该发送/滚动用户视图到另一个 div .....我已经尝试过 .animate 但失败了....

任何帮助或参考将不胜感激

<div id="SecondInfo"></div>
        <script>
            $("#btnSubmit").click(function () {
                var FirstName = $('#FirstName').val();
                $.ajax({        
                   type: "POST",
                   url: '@Url.Action("Submit", "Home")',
                   dataType: "JSon",
                   data: { "FirstName": FirstName},
                   success: function (data) {
                       console.log(data);
                       $("#SecondInfo").animate({ scrollTop: "0px" });
                   },
                   error: console.log("it did not work"),
                });
            });
        </script>

Answer 1

在animate() 中使用scrollTop() 并设置您想要关注的元素的偏移量，这里是代码的一部分。

$('html,body').animate({scrollTop: $('#second').offset().top}, 200, function() {
//next code
    });

演示 JsFiddle Scroll animate

Answer 2

试试.focus()

<script>
            $("#btnSubmit").click(function () {
                var FirstName = $('#FirstName').val();
                $.ajax({        
                type: "POST",
                url: '@Url.Action("Submit", "Home")',
                dataType: "JSon",
                data: { "FirstName": FirstName},
                success: function (data) {
                    console.log(data);
                    $("#SecondInfo").focus();
                },
                error: console.log("it did not work"),
            });
        });
        </script>

Answer 3

好吧，让我假设你有 4 个 divs 并且每个都有一个 input 元素，如下所示，第一个将有 active 类，其余的将被隐藏：

<div id="parentStep">
    <div id="div1" class="steps active">
         <input type="text" id="firstName"/>
    </div>
    <div id="div2" class="steps">
         <input type="text" id="lastName"/>
    </div>
    <div id="div3" class="steps">
         <input type="text" id="contacNum"/>
    </div>
    <div id="div4" class="steps">
         <input type="text" id="addressDetail"/>
    </div>
</div>

现在在success 上的ajax 中，只需尝试找到具有活动类的div 和hide 它和show div，如下所示：

$("#btnSubmit").click(function () {
      var activeDiv=$("#parentStep").find('.steps .active');//get the active div
      var dataToSend=activeDiv.find('input').val();//get the input value of active div
      $.ajax({        
               type: "POST",
               url: '@Url.Action("Submit", "Home")',
               dataType: "JSon",
               data: { "Data": dataToSend},
               success: function (data) {
                     activeDiv.fadeOut("slow").removeClass('active');//remove active from current step
                     activeDiv.next().fadeIn('fast').addClass('active');//get the next div visible and add active class
               },
               error: function(data){
                 console.log("it did not work"),
               }
       });
});