在页面内隐藏和显示页面

Question

我正在使用 Ajax 在页面的 div 中显示页面。它显示一切都很好，但我想要的不是它要求另一个页面，旧页面必须隐藏，新页面取决于点击

finance.blade

 <div class="final_finance_master_tab">

        <div class="col-md-12">
            <div class="box box-solid">
                <div class="tasks-sec clearfix">
                    <div class="panel panel-default mb-0">
                        <div class="panel-body p-0">
                            <div>
                                <h4 class="mt-12 display-ib">Finance</h4>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix task-sec-border">
                        <div class="col-md-12">
                            <div class="col-md-4 border-bottom task-inner-fields" id="receivables">
                                <div>
                                    <i class="icon-leave" aria-hidden="true"></i>
                                    <a target="_blank" onclick="loadTab('{{url('/finance2/payments')}}')">Recievables</a>
                                    <div class="pending-leave-approvals">
                                        <span>0</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 border-bottom task-inner-fields" id="attendance-not-marked">
                                <div>
                                    <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    <a  onclick="loadTab('{{url('/finance2/payments')}}')">Payables</a>
                                    <div class="job-openings">
                                        <span>0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </ul>


    <script>
        function loadTab(target) {
            $.ajax({
                url: target,
                type: 'GET',
                data: {},
                success: function (data) {
                    $('.final_finance_master_tab').append(data);
                    console.log(data);

                }
            });
        }


    </script>
@endsection

每个页面部分都将根据 i=clicking 打开。但是当链接时，它的 div 会变得更大。我想在 div 中隐藏旧页面并在 div 中显示新页面

Answer 1

您需要先使用 empty() 删除 div 中的现有内容。

function loadTab (target) {
    $.ajax ({
        url:  target,
        type: 'GET',
        data: {},
        success: function (data) {
            var div = $('.final_finance_master_tab');
                div.empty ();
                div.append (data);                
            console.log (data);
        }
    });
}