转到下一页而不使用与索引页相同的标签答案

【问题标题】：Go to next page without using the same tags as the index page转到下一页而不使用与索引页相同的标签
【发布时间】：2014-03-05 05:18:26
【问题描述】：

我正在尝试为我的页面编写一个 java 脚本函数。 “index.html”页面的基本布局包含所有必要的标签（html、head、title 和 body）。我的问题是，我将如何进入下一页（如果您单击菜单项）而不必编写相同的标签并从“index.html”页面复制所有数据 - 即没有冗余代码。

例如除“index.html”页面外，有 3 个主要页面（这一页面上有所有主要标签）。其他页面是 1-About 2-Contact 3-Gallery。在每个页面上，标签将只有：

呜呜呜

其他一些带有文字、照片等的标签

什么是java脚本函数的代码来改变标签内的文本/内容而不必在每个页面上复制整个文档的代码？

我想使用 Chrome 作为默认浏览器，我只使用 HTML 和 Java 脚本（没有 PHP）

谢谢

【问题讨论】：

你自己试过什么？当您在 Google 上搜索信息时，您得到了什么结果，为什么它不符合您的要求？
您可能正在寻找 DOM 对象的 innerHTML 属性。您的其他内容（1-关于 2-联系 3-Gallery）在哪里？您是要从服务器延迟加载这些内容，还是只是将它们隐藏并且您想显示它们？
你为什么不用 PHP？
@MjrKusanagi 我几乎添加了一个切换功能，用于显示从无到阻止。这会更容易，不是吗？

标签： javascript jquery html css document-body

【解决方案1】：

使用可以使用此功能，这将解决您的问题，只需将您的 div Id 传递到您想要加载具有索引布局的页面内容的位置。在我的示例中，我将内容加载到容器 div 中。

/**
     * Load page into url
     *
     * @param url           The url to load
     * @param onleave       The function to call before leaving
     * @param onenter       The function to call after loading
     */
function loadPage(url, onleave, onenter) 

{
    alert(url);
    console.log("loadPage("+url+")");

    // If onleave function specified
    if (onleave) {
        onleave();
    }

    var xmlhttp = new XMLHttpRequest();

    // Callback function when XMLHttpRequest is ready
    xmlhttp.onreadystatechange=function(){
        if(xmlhttp.readyState === 4){
            if (xmlhttp.status === 200) {
                console.log("Received content"+xmlhttp.responseText);
                document.getElementById('container').innerHTML = xmlhttp.responseText;

                // If onenter function specified
                if (onenter) {
                    onenter();
                }
            }
            else {
                document.getElementById('container').innerHTML = "Error loading page " + url;
            }
        }
    };
    xmlhttp.open("GET", url , true);
    xmlhttp.send();
    return;
}

【讨论】：

这将 100% 解决您在 index.html 页面中定义的布局加载内容的问题

【解决方案2】：

好的，试试这个：

<!doctype html>
<html>
<head>
<script type="application/javascript">
function menuClick(x) {
    if(x == "About"){
        var menu1 = document.getElementById("menuButton_1");
        menu1.innerHTML = "The HTML content for your about section";
    } else if (){
        // replicate the same for your other two menu sections
        // here #2
    } else if() {
        // here #3
    }
}
</script>
</head>    
<body>
<div id="menuButton_1" onclick="menuClick('About')">
</div>
<div id="menuButton_2" onclick="menuClick('Contact')">
</div>
<div id="menuButton_3" onclick="menuClick('Gallery')">
</div>
</body>
</html>

您可以执行“onclick”函数以在单击菜单按钮时触发。在您的 javascript 函数中，您可以测试单击了哪个菜单按钮并设置页面上特定元素的 innerHTML 以显示正确的内容。

您可以通过定位每个元素的 id 来更改多个元素的内容。只需创建更多 javascript 变量并使用它们来定位您要更改的特定 HTML 元素的 innerHTML。

【讨论】：

抱歉投反对票，但此答案不包括发帖人要求的“JavaScript 函数代码”。另外，如果您想知道“为什么没有 PHP？”，请添加评论。您发布的是澄清请求，而不是答案。
@MjrKusanagi 我已经调整了我的答案。感谢您让我保持警惕并保持专业。