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

Question

1. 我已经使用过Jquery UI标签。但在我的新项目中，我需要带有细节的简单标签。我使用了this jquery ui demo，但是当我点击任何标签时，它会刷新所有页面。 （这就是我在工作中需要实现的目标）

2. 现在我认为问题不同了。 当我只使用锚标签时（请注意我在这一点上只讨论锚标签而不是关于jquery ui标签），它会刷新页面。我知道如果我在href中使用＃不会触发click事件，页面也不会刷新，但在我的情况下它会刷新页面。

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

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

Answer 1

您需要使用href更改anchor elements的{​​{1}}，

<强> HTML

div-tab-id

<强> SCRIPT

<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的ID，并在div elements中提供。

Live Demo

Answer 2

我相信你误解了DOM结构，点击指定URL上的视图源并检查DOM结构 对于href没有＃，而是＃tabs-1，它打开带有id tabs-1

的div

Answer 3

以下代码可以解决问题：

onclick='event.preventDefault();'