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>

它显示加载时的登录页面，但是，当我点击按钮时，它只显示容器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

尝试使用load()

等

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

Answer 3

您可以使用AJAX功能实现此目的。如果您可以使用代码详细说明问题，那么我可以尝试使用您可以使用的代码来帮助您。

在其中加载另一个页面的最简单方法是： -

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

Answer 4

我相信您想要接近SPA（单页应用程序）

查看此SO问题：compiling HTML fragments for Single Page Application (SPA)?

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

或使用john papa的热毛巾 http://www.johnpapa.net/hottowel/

Hot Towel：因为你不想在没有人的情况下去SPA！

使用Jquery在单个页面中导航

4 个答案: