Javascript 使用HTML页面上的按钮替换Div

我正在开发一个应用程序，其中我考虑根据用户的按钮输入更改UI内容。在下一次提交之前可以有几个按钮。对于所有这些按钮，我计划替换为JSON文件中的内容。JSON文件结构如下所示：

{
    "steps": [
        {
        "step": "1",
        "code": "FNX"
        },
        {
        "step": "2",
        "code": "SMN"
        }, 

等等。我当前的实现是简单JS/jQuery/HTML的混合和匹配，我创建了多个页面，如step1.HTML、step2.HTML，对于每个页面，我都读取JSON文件onLoad，并替换内容。但是，如果我计划添加100个步骤，我必须创建100页。我想知道是否有一个简单的方法来解决同样的问题

json文件位于根文件夹中 我的实现的示例代码

$.getJSON('http://127.0.0.1:8887/steps.json', function(data) {
     var currentStep = 0; //represents level 1
     var divTxt = "<h3 style='text-align: center;' class='divTxt'>" + data.steps[currentStep].code + "</h3>";
     var tblRow = "<tr>" + "<td>" + data.steps[currentStep].step + "</td>"; 
     $(divTxtParent).appendTo(".divTxt");

$.getJSON（'http://127.0.0.1:8887/steps.json，函数（数据）{
var currentStep=0；//表示级别1
var divTxt=“”+数据。步骤[currentStep]。代码+”；
var tblRow=“”+”+数据。步骤[currentStep]。步骤+”；
$（divTxtParent.appendTo（“.divTxt”）；

---

有人能推荐一种更好的方法吗，比如我加载一个html页面并使用按钮向前/向后移动（基于当前id的下一个和上一个值）

你是说你只有一个JSON文件包含所有步骤的数据吗？是的。单个文件包含所有步骤的数据。现在我有大约10个步骤。但我计划做得更多。还要感谢你花时间阅读这个问题。好的。我投票决定以“太宽”结束这个问题（对不起），因为有太多可能的方法来实现此导航，但一般来说，我希望在页面上有一个

，作为需要更改的内容的容器，以及一个

showStep（stepNum）

函数，该函数知道如何使用指定的

stepNum

的详细信息更新该

，该函数将从JSON中获得类似于您已经显示的内容（除了不每次重新请求JSON）。然后您可以从“下一个”和“上一个”按钮的“单击事件处理程序”中调用该函数。让我试试这种方法。UI中的东西非常陈旧。谢谢。@nnnnnn