Question

我面临一个非常奇怪的问题。我在我的html中有选项卡和子选项卡，当我点击选项卡/子选项卡'activeContent'类放在它上面时。如果我单击另一个选项卡/子选项卡，则会从上一个选项卡/子选项卡中删除“activeContent”类，并将其放在当前选项卡/子选项卡上。虽然这种情况可以正常工作，但我一直点击多个标签/子标签。但在IE8中它很慢。特别是当我点击后退按钮时，会加载前一个子选项卡中的内容，但活动子选项卡需要花费大量时间来更改其类。它的效果是，虽然那个活动子标签中的某些其他标签的内容仍然是previuos。

我甚至试图首先更改tab / subtab类，比如

$(currentTab.node).removeClass('activeContent');
$(tab.node).addClass('activeContent');

然后使用seTimeout，就像上面的代码执行完毕后一样。

setTimeout(fuunction(){

//load ajax content
}, 800);

即使这样，标签/子标签也需要花费大量时间来改变它的类。

这是IE8还是我可能需要优化我的代码。我不确定。在包括IE6在内的所有其他浏览器中，一切正常。它与IE8中的后退按钮有关吗？

Answer 1

点击后退按钮时是否正在调用此代码？很可能后退按钮导致页面刷新，您正在等待整个页面重新加载。 IE8可能只是让这种行为更加明显，因为它正在以不同的方式处理页面内容的缓存。

Answer 2

我有替代解决方案。这是锚标记上的点击事件吗？我注意到IE取消对具有href属性的锚标记的默认操作需要花费过多的时间。特别是在IE8中。

以下是我网站的一个示例函数：

function SwapLinks() { // This allows our pages to degrade gracefully. But hrefs are slow. So, if JS is enabled remove the href!
$(".playerLink").each(function (index) {
    var link = $(this).attr("href");
    if (link != undefined && link != null && link != "") {
        $(this).removeAttr("href");
        $(this).attr("link", ""); // This little number makes IE6/IE7 happy.
        $(this).attr("link", link);

    }
});

然后你会在（“.playerLink”）上添加一个处理Ajax更新的点击事件。

Answer 3

实际上我的代码没有问题。我在朋友机器上测试过，它工作正常。然后我重置IE8，一切都开始正常工作。我不确定为什么IE8会以这种方式表现。它也发生在早些时候，我不得不重置IE8，因为它没有识别我的本地机器上的jboss服务器上运行的应用程序http://my-pc:8080/myapp/mypage.html而是我必须做http://167.232.23.12/myapp/mypage.html然后它会显示evrything 。因此，当我重置浏览器时，我可以运行我的应用程序 http://my-pc:8080/。

Answer 4

我也遇到了这个问题，事实证明这是因为我忘记了return false;事件中的click()。（我想e.preventDefault()也可以。）

我一直在使用<a href="#">之类的链接作为我的标签，因为它并没有真正导航到任何地方，但IE似乎“试图”导航并花时间这样做，所以返回false会阻止导航真实。（这可能是一种最好的做法，让我把“真实”的链接放回去，这可能也是最好的做法。）

当我在我的开发机器上加载带有file:// URL的页面时（而不是将其部署到服务器并通过HTTP以常规方式访问它），这似乎特别成问题。

（感谢Jeff Davis和kd44，他的答案让我走上正轨。）

在IE8中jquery DOM操作非常慢，特别是addClass和removeClass

4 个答案: