javascript - JQuery UI Tabs - Modify link for tab - Stack Overflow

admin管理员组

文章数量:1425739

Is there a way to modify the link to a tab in jquery ui through jquery/javascript?

For example, my page layout has a query mechanism at the top, with several tabs underneath it. When the user submits the query, I'd like append the query string to each of the tab links. This works fine if I do full page refreshes when I submit the query, I just plug the query string in the link as the tabs are being built. However, if I try to submit and get my results asynchronously, I need my tabs links to get updated.

Below is a snippet of my button click event event, I build a query string, then submit it like this:

    $.ajax({
                url: "/MyController/" + actionPrefix + "Index?q=" + query + extraParm + "#ui-tabs-" + selectedTab,
                cache: false,
                success: function(html) {
                    $(list).remove();
                    $(container).append(html);
                    $('li a.actionLink').unbind('click').click(function() {
                        //This was some code I was playing with to change tab links, but couldn't seem to get it working...                        
                    });
                }
            });

Is there a way to modify the link to a tab in jquery ui through jquery/javascript?

For example, my page layout has a query mechanism at the top, with several tabs underneath it. When the user submits the query, I'd like append the query string to each of the tab links. This works fine if I do full page refreshes when I submit the query, I just plug the query string in the link as the tabs are being built. However, if I try to submit and get my results asynchronously, I need my tabs links to get updated.

Below is a snippet of my button click event event, I build a query string, then submit it like this:

    $.ajax({
                url: "/MyController/" + actionPrefix + "Index?q=" + query + extraParm + "#ui-tabs-" + selectedTab,
                cache: false,
                success: function(html) {
                    $(list).remove();
                    $(container).append(html);
                    $('li a.actionLink').unbind('click').click(function() {
                        //This was some code I was playing with to change tab links, but couldn't seem to get it working...                        
                    });
                }
            });

• javascript
• jquery
• jquery-ui
• jquery-ui-tabs

Share Improve this question Follow asked Jul 8, 2011 at 15:24 BrostoBrosto 4,57533 gold badges3838 silver badges5151 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Above answer will not work in JQuery 1.9+ as describer here. To work with jquery ui tabs 1.9+ you have to do something like this

var tabs = $("#tabs");
var tab = $(tabs.data('uiTabs').tabs[TAB_INDEX]);
tab.find('.ui-tabs-anchor').attr('href', "NEW_URL");
// If cached initially. Remove cache then
tab.data( "loaded", false);
tabs.tabs( "option", "active", TAB_INDEX);
tabs.tabs("load", TAB_INDEX);

This will change the URL of tab at particular index and load that tab.

The href is stored in the .data store.

You can use the following to change the url

$('#tabs').tabs('url' , tabIndex , url );

Another way see my answer to another SO question.

Getting Target URL from jQuery-UI Tabs

This allows you to say the following to change the first tab url

$('#tabs a:first').data('href.tabs', 'someNewUrl');

You should be able to just change the href:

       success: function(html) {
            $(list).remove();
            $(container).append(html);
            $('li a.actionLink').attr('href',somethingNew);
        }

本文标签： javascriptJQuery UI TabsModify link for tabStack Overflow