Javascript 如何使用“下一步”按钮或制表符创建多个表格，并将其指向另一个窗体

我有一个小问题，我真的不知道如何处理，我创建了一个包含3个段的表单（将这些段设置为tab类），现在我想创建表单的下一个和上一个按钮，允许用户导航到

选项卡

。但在默认情况下或加载时，我只希望

第一个选项卡当前可见


.col-lg-9{
浮动：对；
边际上限：0px；
填充：0px；
}
.例如{
边框颜色：rgb（75,218,75）；
边框样式：实心；
边界：40px；
填充：1rem；
}
身体{
背景颜色：灰色；
}
.form inline.form组{
显示：内联块；
页边距底部：0；
垂直对齐：中间对齐；
}
.form inline.form控件{
显示：内联块；
页边距底部：0；
垂直对齐：中间对齐；
}
.form inline.form组{
右边距：20px；
}

你好，世界！
公司信息：（填写适当的方框）



公司名称：
公司办公地址：
城市：*
城市：*
国家：*
国家：*
公司注册号：*
成立日期：*
成立国：*
注册国：*
公司网站：*
公司电邮：*
传真（如适用）：*
公司电话：*
税务识别号（TIN）：*
职业：
英属维尔京群岛：
收入来源：



其他有关资料
风险地点地址（如适用）
风险地点地址（如适用）
风险地点地址（如适用）
风险地点地址（如适用）
风险地点地址（如适用）
风险地点地址（如适用）



经纪人信息
姓名：
NAICOM注册。不。：
（经纪人特此证明，法律要求的所有必要文件
（从客户处收集）



经纪人签名、盖章/盖章






您可以使用三个
.html
文件，并将三个
选项卡中每个选项卡的代码粘贴到这三个文件中，然后您可以通过将这些链接添加到锚定标记

注意：我添加了外部IDE，因为不可能在SO的代码段中创建三个
.html
文件

更新：如果您不想创建三个文件并相互引用，您可以使用
JS
如下


tab=document.getElementsByClassName（'tab'）
btn=document.getElementsByClassName（'btn1'）
选项卡[1]。style.display='none'
选项卡[2]。style.display='none'
btn[0]。类列表。添加（“已禁用”）
函数next（）{
如果（选项卡[0].style.display！=“无”）{
选项卡[0]。style.display='none'
选项卡[2]。style.display='none'
选项卡[1]。style.display='block'
btn[0]。类列表。删除（“已禁用”）
}
else if（选项卡[1].style.display！=“无”）{
选项卡[0]。style.display='none'
选项卡[2]。style.display='block'
选项卡[1]。style.display='none'
btn[1]。类列表。添加（“已禁用”）
}
}
函数previous（）{
如果（选项卡[0].style.display！=“无”）{
}
else if（选项卡[1].style.display！=“无”）{
选项卡[0]。style.display='block'
选项卡[2]。style.display='none'
选项卡[1]。style.display='none'
btn[0]。类列表。添加（“已禁用”）
}
否则{
选项卡[0]。style.display='none'
选项卡[2]。style.display='none'
选项卡[1]。style.display='block'
btn[1]。类列表。删除（“已禁用”）
}
}
//警报（选项卡[1]。样式。显示）
。已禁用{
边框：1px实心#999999；
背景色：#中交；
颜色：#666666；}
。已禁用：悬停{
游标：默认值；
}
.col-lg-9{
浮动：对；
边际上限：0px；
填充：0px；
}
.例如{
边框颜色：rgb（75,218,75）；
边框样式：实心；
边界：40px；
填充：1rem；
}
身体{
背景颜色：灰色；
}
.form inline.form组{
显示：内联块；
页边距底部：0；
垂直对齐：中间对齐；
}
.form inline.form控件{
显示：内联块；
页边距底部：0；
垂直对齐：中间对齐；
}
.form inline.form组{
右边距：20px；
}

你好，世界！
公司信息：（填写适当的方框）



公司名称：
公司办公地址：
城市：*
城市：*
国家：*
国家：*
公司注册号：*
成立日期：*
成立国：*
注册国：*
公司网站：*
公司电邮：*
    var currentTab = 0;
    showTab(currentTab);

    function showTab(n) {

        var x = document.getElementsByClassName("tab");
        x[n].style.display = "block";

        if (n == 0) {
            document.getElementById("prevBtn").style.display = "none";
        } else {
            document.getElementById("prevBtn").style.display = "inline";
        }
        if (n == (x.length - 1)) {
            document.getElementById("nextBtn").innerHTML = "Submit";
        } else {
            document.getElementById("nextBtn").innerHTML = "Next";
        }

        fixStepIndicator(n)
    }
    function nextPrev(n) {
        var x = document.getElementsByClassName("tab");

        if (n == 1 && !validateForm()) return false;

        x[currentTab].style.display = "none";

        currentTab = currentTab + n;

        if (currentTab >= x.length) {
            document.getElementById("regForm").submit();
            return false;
        }
        showTab(currentTab);
    }