Javascript 使用Jquery在单个页面中导航

我有两个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>

函数hideDiv（）{
document.getElementById（“容器”）.style.display='none'；
}  
函数showDiv（）{
document.getElementById（'container'）.style.display=“block”；
}

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>

用户名：
密码：
提交
清除所有
//index.html页面

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

尝试使用

像

---

您可以通过使用AJAX功能来实现这一点。如果你能详细说明你的代码问题，那么我可以尝试帮助你使用代码

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

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

---

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

例如，类似于：

HTML:

---

我相信您希望接触SPA（单页应用程序）

看看这个问题：

你可以看看 及

或者使用john papa的热毛巾

热毛巾：因为你不想去温泉没有一个

---

这令人困惑。。你为什么需要这个？？

onclick=“location.href（'index.html'）”

类似的东西？？它就像一个网页导航？这个问题问得不太好。你试过什么？我们能看一些代码吗？另一种方法是让login.html包含所有标记，并在登录成功时使用ajax从index.html加载内容。url默认浏览器采用index.html更好您可以尝试此方法您不需要登录。html@Ash您使用的是

输入类型=“submit”

。提交表单时，页面将重新加载，并返回到隐藏DIV的第一阶段。这就是为什么您必须改用AJAX，这样您就不会重新加载页面，或者如果您想重新加载页面，那么您必须使用服务器返回的变量来知道何时显示或隐藏div。

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

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

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

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