javascript - IE : AJAX tabs not working

Question

我正在尝试构建一个包含一些选项卡的网页，通过单击选项卡，它将使用 AJAX 加载选项卡下方的内容。

问题:在旧版本的 Internet Explorer 中，单击选项卡将导致重定向到选项卡链接，而不是通过 AJAX 加载该链接后面的内容。

我的html代码:

<ul id="nav">
  <li><a href="page_1.html">Page 1</a></li>
  <li><a href="page_2.html">Page 2</a></li>
  <li><a href="page_3.html">Page 3</a></li>
</ul>

<div id="ajax-content">This is default text, which will be replaced</div>

我的 Jquery 代码:

$(document).ready(function() {
    $("#nav li a").click(function() {

        $("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>");
        $("#nav li a").removeClass('current');
        $(this).addClass('current');

        $.ajax({
            url: this.href,
            success: function(html) {
                $("#ajax-content").empty().append(html);
            }
        });
        return false;
    });
});

Answer 1

如您所知，点击处理程序末尾的 return false; 应该停止冒泡并阻止默认操作。但当然，如果您从未到达那里，那么默认设置将继续。

所以问题必须是:您是否使用调试器浏览了代码以查看它是否抛出错误和/或选择器应匹配的所有内容都已匹配？我的猜测是，由于某种原因，点击处理程序中的某些内容在 IE 上失败，因此您的 return false 没有发生，或者(当然)点击处理程序根本没有被触发。多年来，IE 上出现了多种脚本调试器，最近的是免费的 Visual Studio Express .

查找仅在 IE 上发生的错误的一个特别丰富的领域是其命名空间问题，特别是因为您说这种情况发生在“旧”版本的 IE 上。详情见this blog post ，但基本上在 IE7 中，IE 将几个应该完全不同的命名空间混合在一起(例如，它将所有 id 和 name 值视为位于同一命名空间中，因此，如果您有一个带有 name="foo" 的元素和另一个带有 id="foo" 的元素，IE 会感到困惑)。这种混合在一起的命名空间将影响您的 jQuery 选择器，因为使用 ID 的 jQuery 选择器最终会使用内置的 document.getElementById，而 IE(6 和 7)则使用带有该函数的混合命名空间.