load page under tab dynamically

问题

I am using " tabs(content via ajax) using jQuery plugin."

When I click on the tab, according to the URL given selected page loads inside its content.

What I want is:
I want to display another page under that same tab and remove the content of current page.

In short, how can I redirect from loaded content page under tab to another page without refreshing or redirecting the main page which holds the tab structure?

回答1:

I think the easiest way to do this is to make your ajax PHP script dynamic. You can make the data that is returned from your AJAX call change to suit your needs.

You can then use the refresh method to refresh the content on the tabs, which should now be different coming from your AJAX script:

$( ".selector" ).tabs( "refresh" );

as described in the documents: http://api.jqueryui.com/tabs/#method-refresh

回答2:

Let's say this is your div:

<div id="content"> </div>

Send ajax

In the page that will get your ajax request you can do

if(isset($_POST['getContent')){
    $_POST['getContent'] = file_get_contents('getContent.php');    
    echo $_POST['getContent'];
}
$.ajax({
    type:'POST',
    URL : 'page that will give you your reposne',
    data : {
        getContent : 'getContent'
    },
    success:function(data){
        if(data){
            $('#content').html(data);
        }
    }
});

The file_get_contents('getContent.php') returns the content of the file in a string, so if it is a valid file you should have no problems.

来源：https://stackoverflow.com/questions/15613780/load-page-under-tab-dynamically

标签

jquery

ajax

tabs