색인 페이지와 동일한 태그를 사용하지 않고 다음 페이지로 이동

내 페이지에 자바 스크립트 기능을 코딩하려고합니다. "index.html"페이지에는 필요한 모든 태그 (html, head, title 및 body)가있는 기본 레이아웃이 있습니다. 제 질문은, 동일한 태그를 코딩하고 "index.html"페이지 (예 : 중복 코드가없는)의 모든 데이터를 복사하지 않고도 다음 페이지 (메뉴 항목을 클릭하면)로 이동하는 방법입니다.색인 페이지와 동일한 태그를 사용하지 않고 다음 페이지로 이동

"index.html"페이지를 제외한 3 개의 기본 페이지가 있습니다 (이 페이지에는 모든 기본 태그가 있습니다). 다른 페이지는 1 - About 2 - Contact 3 - Gallery입니다. 각 페이지에서 태그는해야합니다 :

즐 즐 즐

텍스트와 다른 태그, 사진 등

에 자바 스크립트 함수에 대한 코드는 무엇입니까 각 페이지에서 전체 문서의 코드를 복사하지 않고도 태그 내의 텍스트/내용을 변경할 수 있습니까?

나는 기본 브라우저로 크롬을 사용하려는 나는 단지 HTML과 자바 스크립트 (없음 PHP)

감사를 사용하고

출처

2014-03-05 Apprentice

너 자신을 어떻게 해봤습니까? 당신이 정보를 검색했을 때, 당신은 어떤 결과를 얻었으며 당신의 요구 사항에 맞지 않는 이유는 무엇입니까? –

DOM 개체의 innerHTML 속성을 찾고있을 수 있습니다. 다른 콘텐츠 (1 - About 2-Contact 3-Gallery)는 어디에 있습니까? 서버에서 이들을 게으른로드 할 예정입니까 아니면 숨겨져 있고 표시하려고합니까? – MjrKusanagi

왜 PHP를 사용하지 않습니까? – les

를 사용하여 당신의 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-05 05:23:27 Ricky

index.html 페이지에서 정의한 레이아웃을 사용하여 내용로드 문제를 100 % 해결할 것입니다. – 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>

당신은 당신의 메뉴 버튼을 클릭 할 때 발생하는 "onclick을"기능을 실행할 수 있습니다. 귀하의 자바 스크립트 함수에서 어떤 메뉴 버튼을 클릭하고 특정 내용을 표시하도록 페이지의 특정 요소의 innerHTML을 설정했는지 테스트 할 수 있습니다.

각 요소의 ID를 대상으로하여 여러 요소의 내용을 변경할 수 있습니다. 더 많은 자바 스크립트 변수를 만들고 변경하여 특정 HTML 요소의 innerHTML을 대상으로 지정하십시오.

출처

2014-03-05 05:23:38 les

downvote에 대해 유감이지만이 답변에는 요청한 포스터와 같이 "JavaScript 기능 코드"가 포함되어 있지 않습니다. 또한 "왜 PHP가 없습니까?"를 알고 싶다면 코멘트를 추가하십시오. 귀하가 올린 내용은 대답이 아니라 설명 요청입니다. – MjrKusanagi

@MjrKusanagi 답변을 조정했습니다. 제 발끝을 지키고 그것에 대해 전문적으로 대해 주셔서 감사합니다. – les

색인 페이지와 동일한 태그를 사용하지 않고 다음 페이지로 이동

답변

관련 문제