使用jquery动态加载页面

Question

<ul class="menu-items">
    <li class="m-t-30 open" >
        <a href="#" id="dasboard" class="detailed">
            <span class="bg-success icon-thumbnail" style="float:right">
                <i class="pg-home"></i></span>
            <span class="title" >Dashboard</span>
        </a></li>
    <li class="" >
         <a id="messages" href="#">
            <span class="icon-thumbnail" style="float:right"><i class="pg-social"></i></span>
            <span class="title" >Messages</span></a></li>
</ul>

我上面有一个列表，想要动态加载视图页面的内容。 文件结构如下，

这是jquery，

$(function () {
    $("#dashboard").click(function () {
        $('#content').load("Design/Dashboard");
    });
    $("#messages").click(function () {
        $('#message').load("Design/Messages");
    });

});

当我点击链接时，它会用＃附加路径。例如，我在Dasboard localhost：Design / Dashboard中，如果我单击Messages它只是添加#like localhost：Design / Dasboard＃。

Dashboard.cshtml

<div id="content"><h1>Dashboard</h1></div>

Messages.cshtml

<div id='message'><h1>Message</h1></div>

Answer 1

您可以将preventDefault方法与链接上的click事件一起使用，以防止将哈希添加到URL中：

$("#dashboard").click(function (event) {
    event.preventDefault();
    $('#content').load("Design/Dashboard");
});
$("#messages").click(function (event) {
    event.preventDefault();
    $('#message').load("Design/Messages");
});

Answer 2

我改变了一些事情，开始工作了。

  <a href="/Design/Dashboard" id="dashboard" class="detailed">

在jquery中，

$("#dashboard").click(function () {
    $('#content').load($(this).attr('href'));
});