jquery - jquery ui 选项卡更改上不需要的页面刷新

Question

1. 我已经使用过 Jquery UI 选项卡。但在我的新项目中，我需要带有详细信息的简单选项卡。我用过this jquery ui demo但是当我单击任何选项卡时，它会刷新所有页面。 (这就是我工作中需要实现的目标)

2. 现在我认为问题有点不同了。当我仅使用 anchor 标记时(请注意，我仅讨论 anchor 标记而不是 jquery ui 选项卡)，它会刷新页面。我知道如果我在 href 中使用 # 不会触发点击事件，页面也不会刷新，但在我的情况下它会刷新页面。

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

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

Answer 1

您需要使用div-tab-id更改 anchor 元素的href，例如，

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 元素 的 id，并在 achor tag href 中给出>.

Live Demo