Javascript 在页面中隐藏和显示页面

我使用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

财务
可接收
0
应付账款
0

函数加载选项卡（目标）{
$.ajax({
url:target，
键入：“GET”，
数据：{}，
成功：功能（数据）{
$（'final_finance_master_tab'）。追加（数据）；
控制台日志（数据）；
}
});
}
@端部

---

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

您需要先使用删除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);
        }
    });
}