javascript - jquery ui ajax 选项卡 - 重新加载选项卡或更改选项卡位置？

Question

我的一个网站上有一个选项卡布局，显示了项目日志。这些项目被“分页”。

标签最初是这样加载的......

<li><a href="/im/price_change_log/${item_id}">Price Log</a></li>

在选项卡中，我有一些代表下一页和上一页的图标。单击时，我想在此选项卡中加载下一页或上一页结果。

我该怎么做？我是否需要更改选项卡的 url，然后强制重新加载。网址将是...

/im/price_change_log/<item_id>/<page>

js 分页器部分看起来像...

function bind_ui(){
        $(".prev_page").click(function(){
            var page = current_page;
            console.log("Previous Page - current_page("+page+")");
        });
        $(".next_page").click(function(){
            var page = current_page;
            console.log("Next Page - current_page("+page+")");
        });
    };

所以我想我的问题是如何使用新 url 加载选项卡？

Answer 1

以上答案在 JQuery 1.9+ 中不起作用，如描述者 here .要使用 jquery ui tabs 1.9+，你必须做这样的事情

function bind_ui(){
    $(".prev_page").click(function(){
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'active'); 
        if(selected != 0){
            $($tabs.data('uiTabs').tabs[selected - 1]).find('.ui-tabs-anchor').attr('href', newUrl);
            $tabs.tabs('active', selected - 1 );
            $tabs.tabs("load", selected - 1);
        }
    });
    $(".next_page").click(function(){
        var $tabs = $('#tabs').tabs();
        var selected = $tabs.tabs('option', 'active'); 
        if(selected < $tabs.data('uiTabs').tabs.length){
            $($tabs.data('uiTabs').tabs[selected + 1]).find('.ui-tabs-anchor').attr('href', newUrl);
            $tabs.tabs('active', selected + 1 );
            $tabs.tabs("load", selected + 1);
        }
    });
};