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 =点击，每个页面部分都会打开。但是在链接上它的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);
        }
    });
}

在页面中隐藏和显示页面

1 个答案: