jquery-ui - jQuery UI 选项卡 : URL instead of AJAX does not work properly

我这样写:http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

<script type="text/javascript">
    $(function(){
        $("#tabs").tabs({
            select: function(event, ui) {
                var url = $.data(ui.tab, 'load.tabs');
                if( url ) {
                    location.href = url;
                    return false;
                }
                return true;
            }
        });
    });
</script>

<div id="tabs">
    <ul>
        <li>
            <a href="/default.htm">Home</a>
        </li>
        <li>
            <a href="/about.htm">About</a>
        </li>
    </ul>
</div>

选项卡已创建，但初始列表(div、ul、li)也可见。另一个问题:当我将鼠标悬停在选项卡上时，我看到 URL 类型为/default.htm#ui-tabs-1、/default.htm#ui-tabs-2 等。但我想看到 URL“/default.htm”第一个选项卡和第二个选项卡上的 URL“/about.htm”。我可以做什么来解决我的问题？

更新 1.9 版本中有强大的小部件“菜单”。

最佳答案

您错过了对 jQuery UI 选项卡的解释。

此选项卡用于隐藏/显示内容，如果使用 ajax，则提取页面信息并按需显示。

如果您希望这些选项卡充当菜单...那么您需要一个菜单，而不是 jQuery UI 选项卡。

如果您的想法是使用此选项卡但获取 /about.htm作为新内容，那么就可以使用ajax示例