Question

我正在尝试使用jQuery UI标签将多页网站重写为SPA。在shell页面中，一个选项卡引用页面中的id，而其余选项卡通过AJAX加载其他页面。它看起来像这样：

<div id="tabs">
    <ul id="nav">
        <li><a href="#home">HOME</a></li>
        <li><a href="ajax/learn.html">LEARN</a></li>
        <li><a href="ajax/listen.html">LISTEN</a></li>
        <li><a href="ajax/support.html">SUPPORT</a></li>
        <!--etc.-->
    </ul>
    <div id="home">
        <!--blah blah blah-->
    </div>
</div>

在learn.html内，我有另一组UI标签，设置方式相同：

<div id="tabs2">
    <ul id="nav2">
        <li><a href="#about">About Us</a></li>
        <li><a href="ajax/sponsors.html">Sponsors & Donors</a></li>
        <li><a href="ajax/staff.html">Staff & Board</a></li>
        <!--etc.-->
    </ul>
    <div id="about">
        <!--blah blah blah-->
    </div>
</div>

单击learn.html中的选项卡时出现问题：单击此AJAX选项卡中的一个AJAX选项卡的事件会向窗口冒泡，sponsors.html或代替shell的任何加载页。

我试过了event.stopPropagation()但它没有用;在选项卡上使用event.preventDefault会阻止选项卡功能。还有什么可做的？

Answer 1

您可以尝试将ajax调用的结果添加到特定div。在ajax调用的成功函数中。

Answer 2

您是否在单击选项卡或锚点时调用preventDefault？您可能需要为锚点击设置单独的处理程序。

$("ul#nav2 li a").click(function(e) {
    e.preventDefault();
});

Answer 3

我的问题现在已经消失......

我通过AJAX加载的页面有自己的doctype和head标签以及整个shebang。我删除后，我不再有任何问题。

jQuery UI选项卡：Ajax中的Ajax

3 个答案: