jquery ui选项卡更改时不需要的页面刷新答案

【问题标题】：Unwanted page refresh on jquery ui tab changejquery ui选项卡更改时不需要的页面刷新
【发布时间】：2014-03-03 05:18:08
【问题描述】：

我已经使用过 Jquery UI 选项卡。但在我的新项目中，我需要带有详细信息的简单选项卡。我使用过this jquery ui demo，但是当我单击任何选项卡时，它会刷新所有页面。（这是我工作中需要达到的）
现在我觉得问题有点不同了。当我只使用锚标记时（请注意，我在这里只讨论锚标记而不是 jquery ui 选项卡），它会刷新页面。我知道如果我在 href 中使用 # 不会触发点击事件并且页面不会刷新，但在我的情况下它会刷新页面。

我也使用了onclick='return false;' 仍然加载页面。我不知道为什么。我可能不知道我做错了什么。

（第 1 点和第 2 点）我在网上搜索过，但仍然没有得到任何答案。屏幕截图提前致谢。

【问题讨论】：

您能否展示您的代码或为我们制作在线演示。
如果我们可以帮助您，您需要展示一些代码

标签： jquery jquery-ui anchor jquery-tabs

【解决方案1】：

您需要将href 的anchor elements 更改为div-tab-id 之类的，

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>    
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.....</p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat,....</p>
    </div>
</div>

脚本

$(function() {
   $( "#tabs" ).tabs();
});

这里，tabs-1 和 tabs-2 是 div elements 的 id，并在 achor tag href 中给出。

Live Demo

【讨论】：

是的。我已经使用了该代码。但它不工作。它刷新页面。
复制我的代码试试看。请记住，您必须包括所有必需的js 和css。或向我们展示您的代码。
我已经在我的代码中使用了它。当我复制该代码并保存在其他页面时，它可以像我想要的那样工作，但不仅在我的管理面板中。
然后查看页面源码，你看到里面所有需要的js和css了吗？或者在console中查看，有没有报错？
是的，我已经检查并解决了，但这并没有解决我的问题。

【解决方案2】：

我相信你误解了DOM结构点击指定URL上的查看源并检查DOM结构 href没有#，而是#tabs-1，它打开了id为tabs-1的div

【讨论】：

【解决方案3】：

下面的代码可以解决问题：

onclick='event.preventDefault();'

【讨论】：