여러 페이지 페이지

이 게시물에 게시 한 아래의 코드로 하나의 HTML로 비슷한 페이지를 여러 별개의 페이지를 넣을 수 있도록 상대 : Multiple distinct pages in one HTML file 여러 페이지 페이지

그러나, 나는 고정을하고 싶습니다 헤더를 탐색하여 탐색 할 수 있습니다.
예를 들어, 헤더에는 사용자가 선택할 수있는 4 개의 링크 (Link1, Link2 등)가 있습니다. 사용자가 "Link2"를 클릭하면 링크 2 만 나타나고 다른 페이지는 숨겨진 상태로 유지됩니다.

알려주세요. 감사합니다.

<html> 
    <head> 
     <script> 
      function show(shown, hidden) { 
       document.getElementById(shown).style.display='block'; 
       document.getElementById(hidden).style.display='none'; 
       return false; 
      } 
     </script> 
    </head> 
    <body> 
     <div id="Page1"> 
      Content of page 1 
      <a href="#" onclick="return show('Page2','Page1');">Show page 2</a> 
     </div> 

     <div id="Page2" style="display:none"> 
      Content of page 2 
      <a href="#" onclick="return show('Page1','Page2');">Show page 1</a> 
     </div> 
    </body> 
</html>

출처

2013-10-10 Chris

일부 코드가 누락되었습니다. onclick에서, 당신은 "dijit"이라고 불리는 것을 사용하는데, 어디에서 선언되고 무엇입니까? HTML 본문이 아닌 다른 곳으로 자바 스크립트를 분리하면 더 쉬울 것입니다. – Nenotlep

위의 코드 조각을 사용하여 게시물을 편집 했으므로이 코드를 사용하여 머리글을 만들거나 다른 방법이 있습니까? – Chris

예, 가능하지만 매우 유연하지는 않습니다. 아래에 좀 더 유용 할 수있는 예제를 만들었습니다. 거기에 일반적인 "헤더"는 단지 "페이지 1,2,3보기"라고 읽습니다. 숫자는 클릭 할 수 있습니다. 실제 내용은 질문과 마찬가지로 DIV의 헤더 아래에 숨겨져 있습니다. – Nenotlep

ID로만 게임 할 수 있지만 조금 지루해지기 시작한 페이지가 많으면 게임을 할 수 있습니다. 나는 숨어있는 수업을하는 것이 좋습니다. 또한 페이지에 대한 공통 헤더가 있기를 원하면 HTML 요소에서 HTML 헤더를 작성한 다음 페이지 컨텐츠가 아닌 페이지 링크를 표시하면됩니다.

나는 모든 페이지 DIV에 '페이지'클래스를 추가 한 대체 제안을했습니다. 그러면 "페이지"클래스로 모든 DIV를 숨기고 ID로 원하는 DIV를 표시 할 수 있습니다. 이것은 너무 유연한 시스템이 아니기 때문에 동적 인 페이지 또는 동적 첫 페이지를 쉽게 수행 할 수는 없지만 시작할 수있는 곳입니다. 여기 내 예제 :

이 JSFiddle http://jsfiddle.net/H4dbJ/에 있지만 여기에 코드를 직접입니다 :

<html> 
    <head> 
     <style type='text/css'> 
      span { 
       text-decoration:underline; 
       color:blue; 
       cursor:pointer; 
      } 
     </style> 
     <script> 
      // show the given page, hide the rest 
      function show(elementID) { 
       // try to find the requested page and alert if it's not found 
       var ele = document.getElementById(elementID); 
       if (!ele) { 
        alert("no such element"); 
        return; 
       } 

       // get all pages, loop through them and hide them 
       var pages = document.getElementsByClassName('page'); 
       for(var i = 0; i < pages.length; i++) { 
        pages[i].style.display = 'none'; 
       } 

       // then show the requested page 
       ele.style.display = 'block'; 
      } 
     </script> 
    </head> 
    <body> 
     <p> 
     Show page 
      <span onclick="show('Page1');">1</span>, 
      <span onclick="show('Page2');">2</span>, 
      <span onclick="show('Page3');">3</span>. 
     </p> 

    <div id="Page1" class="page" style=""> 
     Content of page 1 
    </div> 
    <div id="Page2" class="page" style="display:none"> 
     Content of page 2 
    </div> 
    <div id="Page3" class="page" style="display:none"> 
     Content of page 3 
    </div> 

    </body> 
</html>

또한 개발 아이디어는 다음과 같습니다 페이지 1 페이지 2 ... 변수로 PAGEN 페이지 번호가 사용하는 다음/이전 버튼 , 모든 페이지를 반복하며 마지막 페이지를 보여줍니다. 또는 첫번째 것을 보여줍니다. 그 다음에 변수의 현재 페이지를 추적하고 다음 페이지로 이동하는 다음/이전 버튼.

출처

2013-10-11 06:28:48 Nenotlep

SO가 코드없이 jsfiddle 링크를 허용하지 않기 때문에 코드가 직접 추가되었습니다. – Nenotlep

Nice! 이것은 내가 원했던 방식으로 작동합니다. 감사! – Chris

안녕하세요, 코드 상단에 추가 빌드를 위해 또 다른 질문이 있습니다. div를 클릭하고 위에서 제공 한 것과 같은 원하는 페이지를 표시 할 수있는 함수를 어떻게 추가 할 수 있습니까? 하나; 그것의 꼭대기에, 'page 1'내에서 말하면, 'page 1'아래에서 똑같은 기능을하는 또 다른 링크가 있기를 바랍니다. 당신이 명확히하기 위해 나를 필요로하는 경우 알려주세요 – Chris

여러 페이지 페이지

답변

관련 문제