轉到下一頁，沒有使用與索引頁面相同的標記

我想爲我的頁面編寫一個java腳本函數。「index.html」頁面具有包含所有必要標記（html，標題，標題和正文）的基本佈局。我的問題是，我將如何進入下一頁（如果您點擊菜單項），而不必編碼相同的標籤並從「index.html」頁面複製所有數據 - 即沒有冗餘代碼。轉到下一頁，沒有使用與索引頁面相同的標記

例如除了「index.html」頁面（其中包含所有主標籤）外，還有3個主頁。其他頁面是1-約2-聯繫3-Gallery。在每個頁面的標籤將只具有：

唧唧歪歪

與文本的一些其他標籤，照片等

什麼是Java腳本函數的代碼更改標籤內的文本/內容，而不必在每個頁面上覆制整個文檔的代碼？

我想將Chrome作爲默認瀏覽器，我只使用HTML和Java腳本（沒有PHP）

感謝

來源

2014-03-05 Apprentice

你試過自己什麼？當你搜索信息時，你會得到什麼結果，爲什麼它不符合你的要求？ –

您可能正在尋找DOM對象的innerHTML屬性。你在哪裏有其他內容（1-About 2-Contact 3-Gallery）位於？您是否要從服務器上延遲加載這些內容，還是隻是隱藏起來並想要顯示它們？ – MjrKusanagi

爲什麼不使用PHP？ – les

使用可以使用這個功能，這將解決您的問題只是通過你的div標識您要在哪裏加載索引布局的頁面內容。在我的例子中，我在容器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-05 05:23:27 Ricky

這將100％解決您在index.html頁面中定義的佈局的加載內容問題 – Ricky

好試試這個：

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

可以執行「點擊」功能被點擊你的菜單按鈕時觸發。在你的javascript函數中，你可以測試哪個菜單按鈕被點擊，並設置頁面上特定元素的innerHTML以顯示正確的內容。

您可以通過定位每個ID的內容來更改多個元素的內容。只需創建更多的JavaScript變量並使用它們來定位要更改的特定HTML元素的innerHTML。

來源

2014-03-05 05:23:38 les

對downvote感到抱歉，但此答案不包括「所需的海報的JavaScript代碼」。另外，如果你想知道「爲什麼沒有PHP？」，請添加評論。你發佈的是澄清請求，而不是答案。 – MjrKusanagi

@MjrKusanagi我調整了我的答案。感謝您保持我的腳趾和專業。 – les

轉到下一頁，沒有使用與索引頁面相同的標記

回答

相關問題