Jquery ui将页面加载到div中而不刷新

Question

我有带有链接的菜单，并希望使用以下代码将 .php 页面加载到 id 为 main 的 div 中：

$(document).ready(function() {
    $("#documents").click(function(e) {
        e.preventDefault();
        var url = $(this).attr("href");
        $("#main").load(url);
    });
});

我的 HTML 代码是：

 <a class="button" id="documents" href="test.php">Test</a>
        <div>
            <br clear="all" />
        </div>
 <a class="button" id="documents" href="add.php">Add</a>
 <div>
            <br clear="all" />
        </div>
 <a class="button" id="documents" href="view.php">View</a>

我想在这个 div 中加载：

<div id="main">
</div>

问题是只有第一个链接有效，其他链接没有加载到 div 中。他们直接进入网址。请帮助和建议。我是 Jquery UI 的新手。

Answer 1

您必须将documents 视为class 而不是id。因为ID 对于页面是唯一的。

<a class="button documents" href="test.php">Test</a>
        <div>
            <br clear="all" />
        </div>
 <a class="button documents" href="add.php">Add</a>
 <div>
            <br clear="all" />
        </div>
 <a class="button documents" href="view.php">View</a>

jQuery

$(".documents").click(function(e) {
        e.preventDefault();
        var url = $(this).attr("href");
        $("#main").load(url);
    });