How to open a link from within jQuery UI Tabs INSIDE said tab

问题

To start, I have viewed this question and it is not the same issue.

Ultimately, I am trying to allow a link with an opened tab, which once clicked fetches the appropriate URL and displays that URL within the contents of the original tabbed space (but leaving original tabs in the background).

For example:

I have 3 tabs:

Admin (admin.php)
Members (members.php)
Statistics (stats.php)

When I open the Members tab, there are 2 additional links:

Add Member (add.php)
Delete Member (delete.php)

Whether I choose to click one or the other, the contents of add.php or delete.php appear in the same tabbed space as its parent (members.php)

I came across the jquery documentation but doesn't seem to be accessing correctly.

Currently, my jquery code is:

<script type="text/javascript">
$(function() {  
    $( "#tabs" ).tabs({
        spinner: '<img src="../images/loader.gif" />',
        select: function(event, ui) {
            var tabID = "#ui-tabs-" + (ui.index + 1);
            $(tabID).html("<b>Fetching Data.... Please wait....</b>");
        },
        cache:false,
        load: function(event, ui) {
                $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;
                });
        },
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Error: Could not retrieve information." );
            }
        }
    });
</script>

EDIT

I have added a jsbin file to show a tabbed format.

http://jsbin.com/apidi6/edit

I want to essentially be able to click the ebay.com link within the first tab and have a full blown html page load INSIDE of the content of the General Information tab (no page redirect)

回答1:

If I understand you correctly this should do what you want but you will need to change your code a little:

$('a.tabLink').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    var page = '<iframe src="'+href+'" width="100%" height="100%"></iframe>';
    var id = $(this).closest("div").attr("id");
    $('#'+id).html(page);
});

You will need to make sure any link within the tab has a class added to it:

<a href="http://www.ebay.com" class="tabLink">

Now what happens is, you click a link with the class tabLink, the jQuery prevents the browser from following the link. It grabs the address of the link. It builds an iframe to house the page. It gets the ID of the div which the link is in, then it replaces contents of the div with the iframe.

See it working here

The reason for using an iframe is javascript wont allow you to load data from a different domain, having said that, looking at the code you posted, as long as your links are within the same domain your ajax request should be able to load the page, the code I have posted will allow you to load external pages.

What error do you get when you run your code?

来源：https://stackoverflow.com/questions/5904944/how-to-open-a-link-from-within-jquery-ui-tabs-inside-said-tab

标签

jquery

tabs

jquery-ui-tabs