0

我正在尝试使用 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首先阻止了标签功能。还需要做什么？

4

3 回答 3

0

我的问题现在没有了...

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

于 2013-07-16T01:18:15.003 回答
0

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

于 2013-06-25T16:00:27.080 回答
0

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

$("ul#nav2 li a").click(function(e) {
    e.preventDefault();
});
于 2013-06-25T16:09:17.977 回答