Javascript 如何创建具有各种'；页码'；？

解释我要做的事情最简单的方法就是把它看作是一个开始，并看到所需区域中显示的内容。用户单击“下一步”按钮，它将用下一个内容替换上一个内容。它以类似的方式继续，有点像一部视觉小说，但不是真的

唯一的问题是，我想不出最好的方法让它删除以前的内容并添加下一个内容

---

我希望使用JavaScript或其他衍生工具来实现这一点，因为我对它比较熟悉，但我愿意使用任何web集成语言。

修改当前页面的客户端语言将是JavaScript。如果要在客户端更改页面，而每次都不从服务器加载整个新页面，则没有其他跨浏览器选项

以下是javascript的一些可能性：

在原始页面中显示所有内容，并在按下每个连续按钮时隐藏/显示内容块

使用ajax从服务器加载动态内容，并在新内容由ajax加载并插入页面时删除旧内容

使用iframe并以编程方式更改iframe上的

.src

属性，以连续加载新内容

如果主页上没有太多内容，那么选项1是最简单的。通过设置

obj.style.display=“none”

可以很容易地隐藏内容块，或者使用反向

obj.style.display=“block”

显示内容块

选项2更为复杂，因为您需要能够对服务器进行AJAX调用以加载所需的内容，然后在删除旧内容时将其插入页面。对于像jQuery这样的库，对于经验较少的程序员来说，这稍微容易一些

选项3也很容易做到，但没有那么灵活，因为iFrame不像

那样自动符合内容的高度，但它们的优点是，每个连续的内容都可以是服务器上的一个完整的迷你HTML页面

---

下面是选项1的一个工作示例，其中使用普通javascript隐藏/显示内容：

本例使用一些CSS规则触发类名，然后从内容块中添加或删除类名，以使该块显示或隐藏

HTML:

Javascript（位于

标记的正前方）：

---

我相信您正在寻找的是所谓的

分页

。在谷歌上搜索它，你会发现许多解决方案。

<button id="next">Next</button><br><br>

<div class="content active">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
<div class="content">Content 4</div>
<div class="content">Content 5</div>

/* hide all content blocks by default */
.content {
    display: none;
}

.active {
    display: block;
}

// utility functions
function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

function addClass(elem, cls) {
    elem.className += (" " + cls);
}


// install event handler on Next button
document.getElementById("next").addEventListener("click", function() {
    // get active page
    var active = document.querySelectorAll(".content.active")[0];
    var all = document.querySelectorAll(".content");
    // find the active one in the list
    var activeIndex;
    for (var i = 0; i < all.length; i++) {
        if (all[i] === active) {
            activeIndex = i;
            break;
        }
    }
    // show the next one (wrapping back around if necessary)
    var nextItem = all[(activeIndex + 1) % all.length];
    addClass(nextItem, "active");
    // hide the previous one
    removeClass(active, "active");
});

// install event handler on Next button
$("#next").click(function() {
    var next = $(".content.active").removeClass("active").next();
    if (next.length) {
        next.addClass("active");
    } else {
        $(".content").eq(0).addClass("active");
    }
});