$.ajax({ method: "POST", url: "../d/detail/keyInfo", data: { custId: custId }, success: function(result) { var jsonRes = JSON.parse(result); for (const item of jsonRes) { if (item.code === 'customerInfo...-DPDK中文网

要在 JavaScript 代码中为合同部分增加一个切换的 Tabs 标签或者按钮，可以通过动态创建 HTML 元素并将其插入到页面中来实现。下面是修改后的代码，重点是在 item.code === 'loan' 的部分添加了 Tabs 标签：

$.ajax({
    method: "POST",
    url: "../d/detail/keyInfo",
    data: { custId: custId },
    success: function(result) {
        var jsonRes = JSON.parse(result);
        
        for (const item of jsonRes) {
            if (item.code === 'customerInfo') {
                // 客户信息展示
            }
            if (item.code === 'loan') {  // 合同展示

                // 创建 tabs 的 HTML 部分
                const tabContainer = document.createElement('div');
                tabContainer.className = 'tab-container';

                const tabTitles = ['All', '已结清', '停催', '诉讼'];
                const contentDiv = document.createElement('div');
                contentDiv.className = 'tab-content';

                tabTitles.forEach((title, index) => {
                    const button = document.createElement('button');
                    button.innerText = title;
                    button.className = 'tab-button';
                    button.setAttribute('data-index', index);

                    // 点击事件处理，显示对应的内容
                    button.onclick = function() {
                        const selectedIndex = parseInt(button.getAttribute('data-index'));
                        showContent(selectedIndex); // 显示对应内容的函数
                    };

                    tabContainer.appendChild(button);
                });

                // 添加到合同展示部分（假设有一个特定的容器）
                const loanDisplayArea = document.getElementById('loan-display-area'); 
                loanDisplayArea.appendChild(tabContainer);
                loanDisplayArea.appendChild(contentDiv);

                // 初始加载所有内容
                let currentLoansToShow = item.child;  // 默认显示所有贷款信息
                
                function showContent(index) {
                    contentDiv.innerHTML = '';  // 清空现有内容

                    switch (index) {
                        case 0:
                            currentLoansToShow = item.child;  // 所有合同
                            break;
                        case 1:
                            currentLoansToShow = item.child.filter(loan => loan.status === 'settled');  // 已结清
                            break;
                        case 2:
                            currentLoansToShow = item.child.filter(loan => loan.status === 'paused');   // 停催
                            break;
                        case 3:
                            currentLoansToShow = item.child.filter(loan => loan.status === 'litigation');   // 诉讼
                            break;
                        default:
                            currentLoansToShow = item.child;  
                    }

                    currentLoansToShow.forEach(loan => {
                        const loanItemDiv = document.createElement('div');
                        loanItemDiv.innerText = `Loan Code: ${loan.contractCode}, Status: ${loan.loanStatus}`;
                        
                        contentDiv.appendChild(loanItemDiv);  // 将贷款信息添加到内容区域中
                    });
                }

                showContent(0);  // 初始显示所有贷款

            }
        }
        
        me.keyInfo = JSON.parse(result);
        me.form.initForm(jsonRes);
    }
});