javascript - 使用 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>

网页

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

它在加载时显示登录页面，但是，当我单击按钮时，它仅显示容器 div 一秒钟。我应该在这里做什么？

Answer 1

您可以使用 AJAX 和一些 Javascript 来归档它。

例如，类似：

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 2

我相信您想要处理 SPA（单页应用程序）

查看这个 SO 问题：为单页应用程序 (SPA) 编译 HTML 片段？

你可以看看http://requirejs.org/ 和http://durandaljs.com/

或使用约翰爸爸的热毛巾 http://www.johnpapa.net/hottowel/

热毛巾：因为你不想没有一条就去SPA！

Answer 3

Try to use load()

like,

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

Answer 4

You can achieve this by using AJAX functionality. If you can elaborate your problem with code so i can try to help you with the code you can use.

Simplest way to load another page within same is:-

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