0

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

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

呜呜呜

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

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

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

谢谢

4

2 回答 2

0

使用可以使用此功能，这将解决您的问题，只需将您的 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;
}
于 2014-03-05T05:23:27.383 回答
0

好的试试这个：

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

于 2014-03-05T05:23:38.540 回答