Question

解释我想要做的最简单的方法是将其视为开始并看到所需区域中显示的内容。用户单击下一个按钮，它将以前的内容替换为下一个内容。它以类似的方式继续下去，有点像视觉小说，但不是真的吗？

唯一的问题是，我无法找到最佳方法来删除以前的内容并添加下一个内容。

我希望用JavaScript或其他衍生品来做这件事，因为我对它更熟悉，但我愿意使用任何网络集成语言。

Answer 1

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

以下是javascript的一些可能性：

让所有内容都出现在原始页面中，并在按下每个连续按钮时隐藏/显示内容块。
使用ajax从服务器加载动态内容并删除旧内容，因为新内容由Ajax加载并插入到页面中。
使用iframe并以编程方式更改iframe上的.src属性，以便先后加载新内容。

如果主页中的内容不太多，则选项1是最简单的。通过设置obj.style.display = "none"或使用反向obj.style.display = "block"显示内容，可以轻松隐藏内容块。

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

选项3也很容易做到，但不够灵活，因为iframe不会像<div>那样自动符合你内容的高度，但它们的优点是每个连续的内容都可以您服务器上的整个迷你HTML页面。

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

http://jsfiddle.net/jfriend00/6ZFUq/

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

HTML：

<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>

CSS：

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

.active {
    display: block;
}

Javascript（位于</body>标记之前）：

// 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");
});

为了向您展示使用像jQuery这样的库的好处，这里有相同的jQuery功能：

http://jsfiddle.net/jfriend00/ts8Bz/

// 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");
    }
});

如何创建一个包含各种页面的区域＆＃39;？

1 个答案: