1

此 jQuery 代码在 div 中加载特定页面（有效）：

    <script type="text/javascript">
        $(document).ready(function() {

            $("#button2").on("click", function(){  
                $("#loader").load($("#button2").attr("page"));
                return false;
            });
        });
    </script>

另外，我有 2 个带有属性“page”的链接，指示要在 div 中加载的 html 文件：

<li><a href="#" title="" id="button2" page="page1.html">Link 1</a></li>
<li><a href="#" title="" id="button2" page="page2.html">Link 2</a></li>

这是加载页面的 div：

<div id="loader"></div>

问题是当我点击第一个链接时只加载“page1.html”。如果我点击第二个链接不会加载“page2.html”。

我认为这可能是重复链接“button2”的id属性的问题，也许会发生一些事情。

我究竟做错了什么？

谢谢！

4

2 回答 2

3

您不能对元素使用相同的 id。每个 id 属性必须是唯一的（根据HTML4.01和HTML5规范）。

最好使用一个类来识别这些按钮，如下所示：

<script type="text/javascript">
    $(document).ready(function() {

        $(".buttons").on("click", function(){  
            $("#loader").load($(this).attr("page"));
            return false;
        });
    });
</script>

和按钮的 HTML：

<li><a href="#" title="" class="buttons" page="page1.html">Link 1</a></li>
<li><a href="#" title="" class="buttons" page="page2.html">Link 2</a></li>
于 2013-10-09T16:58:21.887 回答
1

“我究竟做错了什么？”

您正在使用重复的 ID，这在 HTML 中是被禁止的。请改用类名或元素选择器。您可以通过以下方式引用事件处理程序中当前单击的按钮$(this)：

<li><a href="#" title="" class="button" page="page1.html">Link 1</a></li>
<li><a href="#" title="" class="button" page="page2.html">Link 2</a></li>

$(".button2").on("click", function(){  
    $("#loader").load($(this).attr("page"));
    return false;
});
于 2013-10-09T16:57:51.770 回答