Question

我在那里写道：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版本中有强大的小部件“菜单”。

Answer 1

你很想解释jQuery UI标签。

此标签用于隐藏/显示内容，如果使用ajax拉取页面信息并按需显示。

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

如果您想要使用此标签但是要将/about.htm作为新内容获取，那么您可以使用ajax示例

http://jqueryui.com/demos/tabs/#ajax

请注意，它会抓取整个内容，因此/about.htm页面不应该<html> <body>个标记

Answer 2

我不想鼓励您这样做，但该解决方案目前可在jQuery UI的网站上获得：http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

您可以稍微扩展一下，只关注某些网址：

select: function(e, ui)
{
    var tab = $(ui.tab);
    var url = $.data(ui.tab, 'load.tabs');
    if(url && tab.attr('data-ajax') == 'false')
    {
        location.href = url;
        return false;
    }
    return true;
}

然后，在定义标签时：

<li><a href="..." data-ajax="false">...</a></li>

jQuery UI选项卡：URL而不是AJAX无法正常工作

2 个答案: