Jquery를 사용하여 단일 페이지에서 탐색

Question

두 개의 html 페이지가 있습니다. 하나는 Login.html이고 다른 하나는 index.html입니다. 사용자가 로그인 버튼을 클릭 할 때마다 index.html으로 이동하려고합니다 (그러나 정상적인 href 연결은 아닙니다).

색인 페이지는 login.html 코드에도 있어야합니다. 단일 페이지 탐색과 같습니다.

동일한 기능을하는 플러그인이 있습니까?

은 내가 버튼을 클릭하면이 단지의 컨테이너 사업부를 보여줍니다 그것은 부하에 로그인 페이지를 표시하지만, 이

<script type="text/javascript"> 

      function hideDiv() { 
     document.getElementById("container").style.display = 'none';  
    } 

    function showDiv() { 
    document.getElementById('container').style.display = "block"; 
} 


     </script> 

HTML 페이지

  <div class="masthead"> 
       <h3 class="muted"> 
       <sapn class="login-logo"><img src="img/QuadAnalytix_reg350x47.png"/> 
       </span></h3> 
      </div> 

      <div id="loginformcontainer"> 

       <form> 
        <label> Username: 
         <input type="text" name="uname"> 
        </label> 
        <label> Password: 
         <input type="password" name="pwd"> 
        </label> 
        <div class="buttons1"> 
         <button type="submit" id="submit" value="Login" class="btn" onclick="showDiv()"> 
          Submit 
         </button> 
         <button type="reset" id="reset" value="Reset" class="btn"> 
          Clear All 
         </button> 
        </div> 
        <div> 




<div id="container"> 

//index.html page 

</div> 
</body> 
</html> 

시도 두번째 .. 내가 여기서 뭘해야하지?

Answer 1

는 AJAX 기능을 사용하여 같은 load()

,

$('body').load('index.html', function() { 
    alert('Load was performed.'); 
}); 

Answer 2

당신이 이것을 달성 할 수를 사용해보십시오. 코드로 문제를 자세히 설명 할 수 있으면 사용할 수있는 코드를 사용하여 도움을 얻을 수 있습니다. 같은 내에서 다른 페이지를로드

가장 간단한 방법은 다음과 같습니다 -

$('body').load('index.html', function() { 
    alert('Page loaded'); 
}); 

Answer 3

당신은 그 archieve하는 AJAX와 약간의 자바 스크립트를 사용할 수 있습니다. 예를 들어

, 뭔가 같은 :

HTML :

<div id = "index"> 
    <input type="button" id="loginButton" value="login"></input> 

    <div id="login" style="display: none;"> 
     Welcome to the site. 
    </div> 
</div> 

JAVASCRIPT (JQUERY) :

$('#loginButton').click(function() { 
    $.post('login.php', function(data) { // HERE YOU LOGIN 
     $('#login').show(); 
    }); 
); 

Answer 4

나는 당신이 SPA (단일 페이지 응용 프로그램)에 접근하려는 생각

이 질문을 확인해보십시오 : compiling HTML fragments for Single Page Application (SPA)?

당신이 존 파파의 물수건 http://requirejs.org/ 및 http://durandaljs.com/

에서 살펴하거나 사용할 수 있습니다 http://www.johnpapa.net/hottowel/

물수건 : 하나없이 SPA에 가고 싶지 않기 때문에!